Bootstrap 按钮的 IE9 渲染问题答案

【问题标题】：IE9 Rendering issue with Bootstrap buttonsBootstrap 按钮的 IE9 渲染问题
【发布时间】：2012-12-18 12:16:08
【问题描述】：

IE9 似乎使用 Twitter Bootstrap 使禁用按钮变得非常丑陋。按钮文本变得模糊，我找不到任何方法来消除这种模糊甚至重置为默认的 IE9 按钮外观..

最好的解决方案是如果有人可以解决这个字体/模糊渲染问题。如果这不可能，我希望拥有默认的 IE9 按钮外观，因为这至少是可读的。

我不打算下载任何补丁或仅在我自己的浏览器中修复此问题！

我试图重置 IE9 按钮的外观，但由于某种原因这似乎是不可能的。文本的颜色变成灰色，上面看起来像一个丑陋的旧 IE 过滤器。

我在<head> 末尾包含了一个 LT IE10 样式表

<!--[if lt IE 10]><link rel="stylesheet" type="text/css" href="css/ie9.css" media="screen" /><![endif]-->

使用以下 css：

.btn.disabled,
.btn[disabled] {
    background: 0;
    background-color: #a9a2a1;
    opacity: 1;
    filter: none !important;
    text-shadow: none !important;
    -ms-color: #000000 !important;
    color: #000000 !important;
    zoom: 1;    
}
input:-ms-input-placeholder {
    color: black !important;
}

文本仍然是灰色的，按钮看起来像上面的灰色...

我的解决方案：

感谢 Emily 的回答，我做了一个 hack：

#sok.btn.disabled,
#sok.btn[disabled] {
    opacity: 1;
    font-size: 0;
    background-image: url('image.jpg');
    width: 48px;
}

所有其他 css 规则都可以不用管

【问题讨论】：

标签： css twitter-bootstrap internet-explorer-9

【解决方案1】：

引导人员确实在他们的 github 页面上提到了这一点，但他们目前没有修复它的方法。这只是 IE9 的问题，因为它会覆盖他们的代码，以及其他任何人的代码。目前没有办法解决这个问题，虽然我想你可以尝试创建一个禁用的按钮图像，并使用更高的 z-index 将它放在看起来讨厌的按钮的顶部，尽管这可能是公平的很多麻烦...希望对您有所帮助。

【讨论】：

我最终做了 font-size: 0;和一个背景图像：/
现在我换了字体，我后悔只做了一张图片..该死的，废话

【解决方案2】：

如果是 IE 9，您需要添加以下样式，

在您的 HTML 中：

<!--[if gte IE 9]>
 <link href="/bootstrap/i9_btn_fix.css" rel="stylesheet" type="text/css"  />
<![endif]-->

i9_btn_fix.css：

.btn.disabled:before,
.btn.disabled:after{
     cursor: default;
     background-image: none;
     opacity: 0.65;
     filter: alpha(opacity=65);
     -moz-box-shadow: none;
     box-shadow: none;
   }

【讨论】：

不是很有帮助，我知道，但这对我来说根本不起作用。我发现影响 IE9 文本渲染的唯一属性是 font-size 和 text-decoration，它们都不能解决这个问题。另一种方法是实际上不禁用按钮，而是应用一个类使其看起来像你想要的那样，并处理 javascript 中的点击，但这对于可访问性 POV 来说并不好。没有好的选择。