CSS和IE8：如何让IE颜色属性在IE8中提交输入时始终如一？

Question

我使用的输入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 */
}

MARKUP

<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。它的风格是这些：

#loginBox {
    width:300px;
    margin:25px auto;
    padding: 25px 30px 30px;
    border:1px solid #c9b9a8;
    -webkit-border-radius:9px;
    -moz-border-radius: 9px;
    border-radius: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);
    /* For IE 8*/ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#544845')";
    /* For IE 5.5 - 7*/ 
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#544845');
    min-height:160px;
    background-color:#fff;
    box-shadow: 4px 4px 6px rgba(0,0,0,.3);
}

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

Answer 1

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

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

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

Answer 2

修改你的CSS，你可能有一些CSS规则可以覆盖它。您的sippet完全独立运行。