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

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为 other 的值border-color。

更新

一个简单的解决方案是从 中删除样式，包装内部 abutton的内部文本并设置. 这在 IE9 中有效，如此处所示。buttondivdiv

Answer 2

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

像往常一样将 1px 边框应用于三个边，但将表单元素包装在标签中，例如 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;
}