Question

我有一个按钮元素，我在其中应用了一个css类，它为按钮的各个边添加了边框颜色。这适用于以前的IE版本，但不适用于IE 9

HTML:

<button class="hello-button">Hello, World</button>

CSS:
.hello-button {     
    border-width: 2px;
    border-style: solid;
    border-color: #eee #a9a9a9 #a9a9a9 #eee;
}

这是一个已知的问题，除了边框式之外还有解决方法：一开始; 我尝试了各种组合，但似乎你再也不能设置按钮元素的边框样式了。

修改：格式化

Answer 1

如果指定3个边框，那么这些边框将在IE9中呈现。指定第4个边框后，IE9拒绝渲染任何边框

<强>使用：

.hello-button {     
    border-top: 2px solid #eee;
    border-right: 2px solid #a9a9a9;    
    border-bottom: 2px solid #a9a9a9;   
}

不起作用

.hello-button {     
    border-top: 2px solid #eee;
    border-right: 2px solid #a9a9a9;    
    border-bottom: 2px solid #a9a9a9;   
    border-left: 2px solid #eee;
}

除非有这种行为的有效（或至少是规范）原因，否则对我来说这似乎是一个错误......

Answer 2

这个很奇怪。如果您不指定border-style，它实际上有效。 IE9将为您提供一个可靠的边框，但其他浏览器将执行各种不同的操作。

但如果你指定border-radius（除了border-style），它还可以继续工作。所以继续对待一些现代的CSS样式：）

当然，如果你想要一个完美的方形按钮，这是不理想的，但是你可以为半径设置一个较低的值（但要仔细检查它的外观）。

Answer 3

它确实看起来像一个bug。您能为旧版本的IE定义文档兼容模式吗？

http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx

Answer 4

看起来像个错误。由于我控制服务器，我通过设置一个X-UA兼容的响应头来解决它IE = EmulateIE8

http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx#Servers

IE 9和按钮元素的样式

4 个答案: