IE6、7、8 和 Firefox、Chrome 兼容性 Hack
作者:parno 日期:2010-04-25
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汇总如下：
引用内容
使用方法： 引用内容
针对谷歌浏览器：
引用内容
当然，注意顺序。根据CSS的优先性，上面的写法，分别针对Firefox、IE8、IE7和IE6显示值。
演示 CCS 实例： 引用内容
演示代码：
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
可以为 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;}
}
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 */
}
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样式 */
}
/* 针对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
}
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 | 查看次数: 17218
发表评论
