Question

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

Answer 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;

但不到一半的地方。我建议只使用详细版本，如果你只需要调整一个角落，并希望保留其他任何一个角落。

图片上的height和width属性应在CSS中设置，而不是input[type="image"]。很长一段时间以来，这些属性都不受欢迎，特别是因为CSS的属性完成了同样的事情。

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

1 个答案: