IE9输入/按钮元素边框颜色问题(IE9 input/button element border c

在现场我目前正在建设我无法让我的边框颜色适合<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 。

UPDATE

一个简单的解决办法是从去除造型button ，包裹内的文字button一个内部div和样式的div 。 如该工作在IE9 这里 。

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

文章来源: IE9 input/button element border color issue