我正在使用输入 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 回答
两者在我的IE8中显示相同的方式
示例:http://www.jsfiddle.net/gaby/9grJP/
也许你有其他规则压倒这些规则 .
修改你的CSS,你可能有一些CSS规则可以覆盖它 . 你的sippet完全独立工作 .