为什么 IE 中没有显示边框半径？答案

【问题标题】：Why is border radius not showing up in IE?为什么 IE 中没有显示边框半径？
【发布时间】：2016-03-05 03:29:20
【问题描述】：

如何让边框半径在 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>

【问题讨论】：

将插入头部。示例：stackoverflow.com/questions/22018567/…
嗯这不起作用。
似乎是 IE 如何在按钮标签上呈现边框半径的错误。为input[type="image"] 添加一个边框，您会看到它在边框顶部呈现图像（即：忽略边框边界）。您可以通过将input[type="image"] 包装在应用相同大小/边框约束的div 中轻松避开它，这就是您的绝对位置，并且具有overflow:hidden;
哦，你真的应该声明你在css中使用的height和width属性。您的表单已经在 LTE IE 8 上爆炸式增长，使用疯狂弃用的属性毫无意义，并将其移动到 CSS 中以便于更改。
@abluejelly 将其包装在 div 中有效！谢谢！想要将此作为答案发布以便我接受吗？

标签： html css internet-explorer

【解决方案1】：

问题似乎出在 IE 对 input[type="image"] 的渲染上——如果你给它一个 border 属性，你可以看到忽略 border-radius 属性的图像被渲染。

最简单的修复方法是将input[type="image"] 包装在div 中，将定位、边框和大小调整属性应用于div（也将调整大小应用于input[type="image"]），然后标记带有overflow:hidden;的div。

文体注释（与问题无关）：

border-radius: 0 12px 12px 0; 和

意思一样

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

但不到 locs 的一半。如果您只需要调整一个角并希望保留其他设置的任何内容，我建议仅使用详细版本。

图像上的height 和width 属性应在CSS 中设置，而不是input[type="image"]。长期以来，这些属性一直不受欢迎，尤其是在 CSS 完成同样的事情之后。

【讨论】：