IE6、7、8 和 Firefox、Chrome 兼容性 Hack

IE6和IE7 li 行高相比IE8以上高2像素:
可以为 li 加 vertical-align: bottom; 来解决。

Clearfix 轻巧方案:
很简洁,但还是有点 Hack。
.clearfix{ overflow: auto; _height: 1%; }

IE6 margin 双倍问题:
可以为 div 加上 display: inline;

IE6 按钮(button)不显示背景图:
可以为按钮加上 background-color: transparent;

兼容各大主流浏览器(最新版本)css hack汇总如下:
引用内容 引用内容
.element{
  color:#f00;             /*w3c标准*/
  ;color:#f00;            /*Webkit(chrome和safari)*/
  color:#f00\0;           /*IE8*/
  color:#f00\9\0;         /*IE9 (color:#f00\0也识别)*/
  *+color:#f00;            /*IE7 */
  _color:#f00;            /*IE6*/
}
/*IE9*/
:root .element{
    color:#f00\9;
}  
/*Firefox*/
@-moz-document url-prefix(){
     .element{color:#f00;}
}
/*opera*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    .element{color:#f00;}
}
/*Chrome和Safari (Webkit)*/
@media screen and (-webkit-min-device-pixel-ratio:0){
    .element {color: red;}
}



使用方法:
引用内容 引用内容
selector{
property:value; /* 所有浏览器 */
property:value\9; /* 所有IE浏览器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}

针对谷歌浏览器:
引用内容 引用内容
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* 针对Google Chrome、Safari 3.0、Opera 9 的CSS样式 */
}

当然,注意顺序。根据CSS的优先性,上面的写法,分别针对Firefox、IE8、IE7和IE6显示值。

演示 CCS 实例:
引用内容 引用内容
p.ie{
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15;
color:blue; // 所有浏览器
color:brown\9; // 所有IE浏览器
+color:red; // IE7
_color:green; // IE6
}


演示代码:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
[本日志由 parno 于 2014-09-03 08:21 PM 更新]
上一篇: GIF 文件的数据结构以及播放和分解 GIF 的源代码[VB][VBP][7Z]
下一篇: C# 语法基础
文章来自: 网络
引用通告: 查看所有引用 | 我要引用此文章
Tags: CSS hack 浏览器 兼容
相关日志:
评论: 0 | 引用: 0 | 查看次数: 16635
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 邮件地址支持Gravatar头像,邮箱地址不会公开.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 500 字 | UBB代码 关闭 | [img]标签 关闭