输入按钮上的IE9 CSS无法正常工作

Question

我不知道怎么说这个，但基本上在IE9中，标准和浏览器模式设置为IE9时，我的按钮样式无法正确呈现。在IE10兼容性与否时，IE9标准和浏览器模式看起来不错，因此在IE10中测试不会显示此错误。在镀铬中它也很完美。这是我的按钮输入代码和.css以及显示按钮渲染的小提琴。我附上了用chrome渲染的按钮的屏幕截图（这是正确的），所以你可以看到它应该是什么样子，我只是不确定这是一个解决方法，并希望有人可以提供帮助。

http://jsfiddle.net/LLHeD/

.button_standard,
.CommandButton,
.CommandButtonNoWidth,
.CommandButtonWorkflow,
.CommandButtonWorkflowNotify
{
    border-top: #F4E6CC 2px solid;
    border-right: #BFB087 2px solid;
    border-bottom: #ABA476 2px solid;
    border-left: #F5DFBA 2px solid;
    padding: 0;
    font-weight: bold;
    font-size: 8pt;
    margin: 0;
    color: #666666;
    background-color: #F3D29D;
    text-decoartion: none;
    cursor:pointer; 
}

<input type="submit" name="ucDocSearchForm$btnSearch" value="Search" onclick="return validateDates();" id="ucDocSearchForm_btnSearch" class="CommandButtonNoWidth" name="btnSearch" onMouseOver="this.src='/applications/images/search_over_clink.gif'" onMouseOut="this.src='/applications/images/search_on_clink.gif'" style="font-weight:bold;width:65px" />

Answer 1

您的问题似乎是border样式中声明的顺序。

CSS border（以及border-left等）按此顺序指定为a concatenation of border-width, border-style, and border-color。

你的订单完全不同。

理论上，让他们处于错误的顺序会破坏事情。在实践中，我没有看到它实际上经常发生;在这种情况下，浏览器通常非常善于理解你的意思，因为这三个值很容易区分（其他一些样式在这方面要求更高，但border通常不那么重要。）

然而，关于理论和实践的讨论不在这里，因为在代码中将值切换为正确的顺序使其按预期工作，所以很明显就是问题。

这是更新的小提琴：http://jsfiddle.net/LLHeD/2/

希望有所帮助。