CSS 和 IE8：如何让 CSS color 属性在 IE8 中的提交输入上始终如一地工作？答案

【问题标题】：CSS and IE8: How can I get the CSS color property to work consistently on submit inputs in IE8?CSS 和 IE8：如何让 CSS color 属性在 IE8 中的提交输入上始终如一地工作？
【发布时间】：2011-05-25 14:07:34
【问题描述】：

我正在使用输入 type='submit' 并应用 CSS 规则，使背景为渐变的深蓝色，字体颜色为白色。我无法让这个输入在 IE 8 中一致地呈现。在我网站的某些部分，它看起来很好，带有可爱的白色类型。在其他部分，分配给主体的颜色胜过 CSS 规则应用的白色。

我对此进行了相当多的研究，但找不到可行的解决方案。我在 CSS Tricks 上找到的建议使用 jQuery 添加 css。我试过这个。我成功添加了内联样式，但 IE8 仍然胜过我的白色。我已经切换了兼容性视图，仍然没有骰子。 0

为什么？

这里是相关的标记和 CSS。

CSS

body {
    color:#222;
    font-size: 12px;
    width:100%;
    background:#8A7967 url(images/bg_body.png) top left repeat-x;
}

.buttonBigBlue,
input[type="submit"] {
  color:#FFF!important;
  -webkit-border-radius:12px;
  -moz-border-radius: 12px;
  border-radius:12px;
  padding:3px 9px;
  text-transform:uppercase;
  font-weight:bold;
  text-align:center;
  vertical-align:middle;
  border:1px solid #74a1a9;
  cursor:pointer; 
  background: #678382; /* for non-css3 browsers */
  background:-webkit-gradient(linear, left top, left bottom, from(#77A7B1), to(#678382));
  background:-moz-linear-gradient(top,  #77A7B1,  #678382);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#77A7B1', EndColorStr='#678382'); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#77A7B1', EndColorStr='#678382')"; /* IE8 */
}

标记

<input type="submit" class="buttonBigBlue" id="login" value="Login" name="login">

此按钮在 IE8 中显示为 #222 文本。

<input type="submit" class="buttonBigBlue" id="saveChanges" value="Save Changes" name="saveChanges">

此按钮在 IE8 中显示为#FFF 文本

进一步调查后更新。

包含无法正确显示的输入的 div 称为#loginBox。它的样式如下：

#登录框 { 宽度：300 像素；边距：25px 自动；填充：25px 30px 30px；边框：1px 实心#c9b9a8; -webkit-border-radius：9px； -moz-边界半径：9px；边框半径：9px 9px 9px 9px； -webkit-box-shadow:rgba(0,0,0,.3) 4px 4px 6px; -moz-box-shadow: 4px 4px 6px rgba(0,0,0,.3); /* 对于 IE 8*/ -ms-filter：“progid：DXImageTransform.Microsoft.Shadow（强度=6，方向=135，颜色='#544845'）”； /* 对于 IE 5.5 - 7*/ 过滤器：progid:DXImageTransform.Microsoft.Shadow（强度=6，方向=135，颜色='#544845'）；最小高度：160px；背景颜色：#fff; 盒子阴影：4px 4px 6px rgba(0,0,0,.3); }

当我删除设置框阴影的 -ms-filter 和过滤规则时，输入文本恢复为白色。

【问题讨论】：

只是在这里抛出一些东西——IE8 可能支持也可能不支持 [type="submit"] 的高级选择器。事实上，它是一个 css3 选择器，因此 IE 的兼容性可能很粗略。只是一个想法。
你有没有想过只使用背景图片或type="image"？
@Di-0xide: IE 完美支持。
移除#loginBox中的cmets
Knu——我试过了。删除 cmets 并保留过滤器会使文本再次变黑。我怀疑 IE8 无法处理用于在按钮上放置渐变的过滤器以及在框上放置阴影的过滤器。

标签： css internet-explorer-8

【解决方案1】：

在我的 IE8 中两者的显示方式相同

示例：http://www.jsfiddle.net/gaby/9grJP/

也许您有其他规则覆盖这些规则。

【讨论】：

【解决方案2】：

修改你的 CSS，你可能有一些 CSS 规则会覆盖它。您的 sippet 完全独立工作。

【讨论】：