Question

在我正在构建的网站中，我无法正确获取<input>和<button>元素的边框颜色。我希望顶部，左侧和右侧边框的颜色相同，然后底部边框的颜色不同。除了这两个元素之外，我可以使样式适用于任何其他元素，并且此问题仅存在于IE9中。任何帮助或解释将不胜感激。

我的问题示例：http://jsfiddle.net/NyG3x/24/

Answer 1

尝试单独设置边框。

border: 1px solid #000;
border-bottom: 5px solid #CE181E

这似乎是IE9中的一个错误。如果将底部边框设置为1px，则红色边框似乎正确显示。但是，如果您将值设置为大于1px的值，则似乎会将border-color还原为另一个border-color的值。

更新

一个简单的解决方案是从button中移除样式，将button的内部文本包裹在div内并设置div的样式。这适用于IE9，如here所示。

Answer 2

我知道这是更多的标记，但它肯定会解决问题。

像往常一样将3px边框应用于三个边，但将表单元素包装在标记中，例如div标记，并在div标记上应用5px底部边框。

HTML看起来像这样：

<form id="button-set-two">
    <div class="btn-wrapper">
        <input class="btn-style" type="submit" value="Btn1" />
    </div>
</form>

CSS看起来像这样：

#button-set-two .btn-style{
    border: 1px solid #000;
    border-bottom:none;
    color: #000;
    float: left;
    font-size: 1.6em;
    margin-right: 5px;
    padding: 2px 10px;
    background: none;
}

#button-set-two .btn-wrapper{
    border-bottom:5px solid #CE181E;
}

IE9输入/按钮元素边框颜色问题

2 个答案: