2024年2月9日发(作者：)
Windows系统下各浏览器常用CSS HACK汇总表
1. 此汇总表中测试浏览器的版本为：
微软系统自带：IE6、 IE7、IE8
火狐：Firefox 3.6.6
Safari：Safari 5.0
谷歌浏览器：Chrome 6.0.458.1 dev
Opera浏览器：Opera 10.60
2. 其中，多数CSS hack是在selector{property:value;}基础上更改的。
selector代表CSS选择器，property代表CSS特性，value代表特性的值。
3. FF代表Firefox，Ch代表Chorme，Sa代表Safari，Op代表Opera
4. Q代表Quirks Mode，S代表Standards Mode。
5. Hack Type列的数字，指的是上面CSS hack的实现方式中的列表号。
1是指“利用浏览器对相同代码的解析和支持的不同实现的hack”，2是指以Firefox或Webkit特有的扩展样式实现的hack。
一定遵守CSS hack的三条原则。CSS hack是没有办法的时候才使用的解决兼容性问题的招术，是用兼容性问题去解决兼容性问题，无异于饮鸩止渴。切莫一有兼容性问题就使用，时刻记得改掉用CSS hack修补的问题。
IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例
1.区别IE和非IE浏览器CSS HACK代码
#divcss5{
background:blue; /*非IE 背景藍色*/
background:red 9; /*IE6、IE7、IE8背景紅色*/
}
2.区别IE6,IE7,IE8,FF CSS HACK
【区别符号】：「9」、「*」、「_」
【示例】：
#divcss5{
background:blue; /*Firefox 背景变蓝色*/
background:red 9; /*IE8 背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】：因为IE系列浏览器可读「9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google
Chrome、Safari等)。
3.区别IE6、IE7、Firefox (EXP 1)
【区别符号】：「*」、「_」
【示例】：
#divcss5{
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读
取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox
4.区别IE6、IE7、Firefox (EXP 2)
【区别符号】：「*」、「!important」
【示例】：
#divcss5{
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
*background:orange; /*IE6 背景变橘色*/
}
【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。
5.区别IE7、Firefox
【区别符号】：「*」、「!important」
【示例】：
#divcss5{
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
}
【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。
6.区别IE6、IE7 (EXP 1)
【区别符号】：「*」、「_」
【示例】：
#tip {
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。
7.区别IE6、IE7 (EXP 2)
【区别符号】：「!important」
【示例】：
#divcss5{
background:black !important; /*IE7 背景变黑色*/
background:orange; /*IE6 背景变橘色*/
}
【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。
8.区别IE6、Firefox
【区别符号】：「_」
【示例】：
#divcss5{
background:black; /*Firefox 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。
以上包括了IE6IE8IE7火狐浏览器兼容问题及解决方法。
CSS Hack汇总快查(CSS兼容代码演示)
以下是常用CSS HACK问题及解决代码-DIV+CSS网支持
1、屏蔽IE浏览器（也就是IE下不显示）
*:lang(zh) select {font:12px !important;} /*FF的专用*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
2、仅IE7识别hack
*+html {…}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
3、IE6及IE6以下识别CSS HACK
* html {…}
这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body select {……}
这句与上一句的作用相同。
4、仅IE6不识别div hack
select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值，流释在冒号前。
5、仅IE6识别支持
.yangshi{_height:20px;}
这里IE6支持识别CSS属性前“_”短下划线。
6、仅IE6与IE5不识别
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
7、仅IE5不识别
select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别
8、盒模型解决方法
selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
9、清除浮动
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题 。
10、截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap;
overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。
11、只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。
12、IE的if条件Hack
所有的IE可识别
只有IE5.0可以识别
IE5.0包换IE5.5都可以识别
仅IE6可识别
IE6以及IE6以下的IE5.x都可识别
仅IE7可识别
13、仅IE8兼容识别
div{height:20px9;}
这里的“9”仅IE8支持识别
解决PNG图片在IE6中背景不透明方
1、解决PNG图片在IE6中背景不透明的CSS与JS代码 - TOP
JS代码
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = ("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (s))
{
for(var j=0; j<; j++)
{
var img = [j]
var imgName = rCase()
if (ing(-3, ) == "PNG")
{
var imgID = () ? "id='" + + "' " : ""
var imgClass = (ame) ? "class='" + ame + "' " : ""
var imgTitle = () ? "title='" + + "' " : "title='" + + "' "
var imgStyle = "display:inline-block;" + t
if ( == "left") imgStyle = "float:left;" + imgStyle
if ( == "right") imgStyle = "float:right;" + imgStyle
if () imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = " + " style="" + "width:" + + "px; height:" + + "px;" + imgStyle + ";" + "filter:progid:mageLoader" + "(src='" + + "', sizingMethod='scale');">
TML = strNewHTML
j = j-1
}
}
}
}
Event("onload", correctPNG);
CSS代码：
#id{background:url(图片路径) ;_filter:
progid:mageLoader(enabled='true', sizingMethod='scale',
src="图片路径");_background:none;}
2、解决png图片在html中IMG标签使用PNG图片IE6中背景不透明方法 - TOP
1、新建一个JS文件为,进以上JS代码拷贝到JS文件里
2、在HTML中声明只有IE6读取此新建JS文件中
只允许IE6读取此JS文件方法：
3、在html中使用图片标签IMG运用PNG图片，在IE6试试看PNG图片背景是否透明了。
3、在CSS中png作为网页背景时在IE6中背景透明方法 - TOP
同样方法
1、新建JS文件同上，命名为,进以上JS代码拷贝到JS文件里
2、在HTML中声明只有IE6读取此新建JS文件中
只允许IE6读取此JS文件方法：
3、在CSS中运用PNG图片作为背景的地方加入以下CSS代码：
#id{background:url(图片路径) ;_filter:
progid:mageLoader(enabled='true', sizingMethod='scale',
src="图片路径");_background:none;}
这样即可解决PNG图片在HTML中img作为图片图标背景不能透明或PNG图片作为网页背景background运用的一样实现PNG图片背景透明
CSS 针对谷歌浏览器(Chrome) safari的webkit核心浏览器CSS hack
我们知道和会运用CSS IE 火狐浏览器之间的区别DIV+CSS HACK，这里为大家再介绍下区别谷歌浏览器(Chrome)苹果浏览器(safari)与IE之间的hack;
只有webkit核心浏览器的谷歌浏览器、safari浏览器识别的CSS hack
Chrome和safari的CSS hack代码，只有谷歌浏览器苹果浏览器读取CSS代码：
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit内核兼容CSS */
}
范例：
@media screen and (-webkit-min-device-pixel-ratio:0) {
.yangshi1{color:#f00}
.yangshi2{border:1px solid #f00;}
.yangshi3{background:#f00;}
}
HTML代码：
总DIV CSS代码：
可自己动动手复制以上完整演示代码，自己实例实例增加记忆和使用技巧知识
演示效果图：
css hack演示图
说明：左边下方为IE浏览器显示效果，右边上方为谷歌浏览器显示效果，很明显Chrome支持独有生效的此CSS hack代码。
CSS网页错位之DIV CSS宽度计算
DIV CSS宽度计算之CSS网页布局错位
为什么计算宽度
计算网页像素宽度是为了CSS网页布局整齐与兼容。常见的我们布局左右结构网页或使用padding、margin布局的时候将计算整页宽度，如果不计算无论是宽度过大过小就会出现错位问题。
怎么计算CSS宽度
例一：我们计算一个左右结构的布局样式。
假如总宽度为400px，那么左右加起来就应当小于400px，那我们可能左边为300px，右边为100px
正确代码：