为什么边界半径在IE中不显示？

我在我的html中有一个<input type=image>元素。在我的CSS我有border-top-right-radius:12px;和border-bottom-right-radius:12px。

一切适用于Chrome和Firefox，但在IE11中，图像以圆角而不是圆角显示。

我也有这个元标记在我的HTML： <meta http-equiv="X-UA-Compatible" content="IE=9" />

的代码如下。
CSS：

body .overlay { 
    background-color: rgba(0, 114, 198,.7);    
    height:100%; 
    position:relative; 
} 
body .layer { 
    background: url('photo-homebanner.jpg') 55%; 
    position:relative; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 
body .goldenDiv { 
    width:665px; 
    height:326px; 
    position:fixed; 
    z-index:100; 
    margin-top:-38px; 
    margin-left:-8px; 
}  
body h1 { 
    color:white; 
    text-align:center; 
    font-family:sans-serif; 
    padding-top:22px; 
    padding-bottom:5px; 
    font-size:45px; 
} 
body h3 { 
    color:white; 
    text-align:center; 
    font-family:sans-serif; 
    font-weight:100; 
    padding-bottom:14px; 
} 
body h3.hidden { 
    visibility:hidden; 
    padding-bottom:0px; 
    position:absolute; 
    top:220px; 
    left:190px; 
} 
body input:focus { 
    outline:none; 
} 
body .prettyInput { 
    align-content: center; 
    padding-left: 20px; 
    padding-right: 70px; 
    margin-left: 106px; 
    width: 350px; 
    height: 61px; 
    font-size: 18px; 
    font-weight: 600; 
    border-radius: 15px; 
    border: hidden; 
    margin-bottom: 40px;   
} 
body .inputOverlap { 
    position:absolute; 
    top:167px; 
    top:166px\9; 
    left:485px; 
    z-index:3; 
    border-top-right-radius:12px; 
    border-bottom-right-radius:12px; 
} 
body hr { 
    color:white; 
    position:absolute; 
    top: 77px; 
    left:120px; 
    align-content:center; 
} 
@-moz-document url-prefix() { 
    body .inputOverlap { 
     position:absolute; 
     top:168px; 
     left:485px; 
     z-index:3; 
     border-top-right-radius:12px; 
     border-bottom-right-radius:12px; 
    } 
}

HTML：

<body> 
    <div class="goldenDiv"> 
     <div class="layer"> 
      <div class="overlay"> 
       <h1>Stay ahead of industry news!</h1> 
       <hr width="450px"/> 
       <h3>Let us send you the latest from our Marketing Department.</h3> 
       <input id="emailAddress" type="text" class="prettyInput" required placeholder="Your email address here" /> 
       <input onclick="sendEmail()" type="image" width="57px" height="57px" class="inputOverlap" src="submitButton.jpg" /> 
       <h3 class="hidden" id="hiddenValidation">*Please enter a valid email address.</h3> 
       <h3>100% privacy, no spam, just news.</h3> 
      </div> 
     </div> 
    </div> 
</body>

来源

2016-03-03 Adam

将插入头部。例如：http://stackoverflow.com/questions/22018567/ie11-border-radius-and-border-bug – JMF

嗯，这没有奏效。 – Adam

似乎是IE浏览器渲染按钮标签边框半径的错误。给'input [type =“image”]添加一个边框，你会看到它将图像渲染到边框的顶部（即：忽略边框边界）。你可以通过将'input [type =“image”]'包装在一个'div'中来避开它，这个div应用了相同的大小/边界约束，就是你绝对放置的位置，并且有'overflow：hidden';' – abluejelly

这个问题似乎是与input[type="image"] IE的渲染 - 如果你给它一个border属性，你可以看到图像渲染忽略border-radius财产。修复

最简单的方法是将包裹input[type="image"]在div，应用定位，边境，并以div上浆性能（适用于大小为input[type="image"]为好），并与overflow:hidden;标记股利。

文体笔记（无关的问题）：

border-radius: 0 12px 12px 0;意味着同样的事情

border-top-right-radius:12px; 
border-bottom-right-radius:12px;

但少于一半的初始位置。我建议只使用详细版本，如果你只需要调整一个角落并且希望其他人被设置为保留的任何角落。

图像上的height和width属性应该在CSS上input[type="image"]被设置为不。这些属性在很长一段时间内都被忽视了，特别是因为CSS完成了同样的事情。

来源

2016-03-04 17:26:37 abluejelly

为什么边界半径在IE中不显示？

回答

相关问题