首页 文章

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

提问于
浏览
1

我正在使用输入 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文本


UPDATE after further investigation.

输入的包含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和过滤规则时,输入文本将返回白色 .

2 回答

  • 0

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

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

    也许你有其他规则压倒这些规则 .

  • 0

    alt text

    修改你的CSS,你可能有一些CSS规则可以覆盖它 . 你的sippet完全独立工作 .

相关问题