0

我不知道该怎么说，但基本上在 IE9 中，标准和浏览器模式设置为 IE9，我的按钮样式无法正确呈现。无论是否兼容 IE10，它们在 IE9 标准和浏览器模式下看起来都不错，因此在 IE10 中进行测试不会显示此错误。在 chrome 中它也可以完美运行。这是我的按钮输入代码和 .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" />

在此处输入图像描述

4

1 回答 1

1

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

CSS border（和border-left, 等）按顺序指定为,和,的串联border-widthborder-styleborder-color。

您以完全不同的顺序排列它们。

从理论上讲，以错误的顺序排列它们可能会破坏事情。在实践中，我并没有看到它实际上经常发生。在这种情况下，浏览器通常非常擅长理解您的意思，因为这三个值很容易区分（其他一些样式在这方面要求更高，但border通常要求不高）。

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

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

希望有帮助。

于 2013-09-16T14:02:45.650 回答