4

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

IE9 bootstrap 禁用按钮文本渲染问题

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

我不想下载任何补丁,或者只是在我自己的浏览器中修复它!

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

IE9引导按钮重置不起作用

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

<!--[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 规则都可以不用管

4

2 回答 2

3

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

于 2012-12-18T13:10:31.460 回答
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;
   }
于 2014-11-21T07:59:25.647 回答