css_hack手册集合
简介
目前，IE6和Firefox是网页用户常用的浏览器。由于不同浏览器对CSS的支持和解析结果不同，同样的CSS代码有时会在不同的浏览器上显现出不同的网页效果。在IE上测试完成的网页，用Firefox 打开却可能满篇混乱，表格错位了，文字间距不同了，代码功能也失效了，等等。
微软新出的IE7,8的变节更是让众多专业的Web designer头疼，Web开发者一直在呼吁抛弃不兼容Wbe标准的IE6浏览器，许多大型网站也采取行动屏蔽或要求IE6用户升级到Chrome、IE8或Firefox 3.5，但是微软那个臭不要脸的还一直嚷嚷会始至不渝支持IE6。
各种浏览器对CSS的解析都不一样，当然这并不是CSS的过错(尽管它还不是很完美)，于是我们想尽办法让不同的浏览器下显示的页面效果能一样，于是不停的写CSS。这中间针对各个不同的浏览器去写不同的CSS的过程就叫CSS hack。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。
CSS Hack的原理是什么
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。
比如IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox 两个都不能认识。等等
书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。
下面举例说明怎样书写CSS Hack。
1.这个例子控制网页背景在IE和Firefox中显示不同颜色。虽然实际网页很少这样制作，但这是体验CSS
Hack控制能力的一个简单明了的好例子。
注：
IE6可识别*，但无法识别!important
IE7可识别*，也可识别!important
Firefox无法识别*，但可识别!important
注：
IE6可识别*和下划线”_”
IE7可识别*，无法识别下划线”_”
Firefox无法识别*或下划线”_”
2.这个例子控制网页页面宽度。使网页在IE中宽度为400px，在Firefox中宽度为700px
注：
IE可识别”+”
Firefox无法识别”+”
3.这个例子控制网页页面高度。使网页在IE6中高度为50px，在IE7或IE6中高度为100px，在Firefox 中高度为300px
注：IE6可识别下划线”_”
IE6和IE7可识别*，IE7无法识别下划线”_”
Firefox无法识别”*或下划线”_”
至此我想大家对CSS Hack Code的使用也有了一定的了解，还有许多的例子，就这不一一列举了。下面就放一些常用的CSS Hack Code出来，以备常用，感谢那些无名Code大侠~
IE的if条件Hack
IE的if条件Hack可以让IE区别于其它浏览器和IE个版本之间的浏览器，它利用…这样的语法让IE浏览器对其进行解析，属于IE浏览器专有。
所有的IE可识别
只有IE5.0可以识别
IE5.0包换IE5.5都可以识别
仅IE6可识别
IE6以及IE6以下的IE5.x都可识别
仅IE7可识别
说明:
gt: greater than，选择条件版本以上版本，不包含条件版本
lt: less than，选择条件版本以下版本，不包含条件版本
gte: greater than or equal，选择条件版本以上版本，包含条件版本
lte : less than or equal，选择条件版本以下版本，包含条件版本
!: everything except what directly follows the \”!\”(选择条件版本以外所有版本，无论高低) 2 3 4
可以像这样为IE7配置一个专用CSS文件
or Like This :
也可以像这样直接输入一行CSS代码
针对不同版本的IE CSS Hack
.font { color:black; --所有浏览器都会显示为黑色
color: red\9; --IE6、IE7、IE8会显示红色
*color: blue; --IE6、IE7会变为蓝色
_color: green; --IE6会变为绿色
}
最后再来总结一下各浏览器的独有特性：
select/*IE5不识别*/ { display:none;}
仅IE5不识别
select { display /*IE6不识别*/:none;}
仅IE6不识别
select/**/ { display /*IE6,IE5不识别*/:none;} 仅IE6与IE5不识别
*+html select {…}
仅IE7与IE5.0可以识别
*+html select {... !important;}
仅IE7可以识别
* html select {…}
html/**/ >body select {…}
_property {...}
IE6及IE6以下版本可以识别
* select {…}
IE8以下IE浏览器都可以识别
>property !important;
IE7、IE8可以识别该规则
屏蔽IE浏览器（也就是IE下不显示）
*:lang(zh) select {font:12px !important;}
仅FF 可见
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
2, IE6/IE7对FireFox
*+html 与*html 是IE特有的标签, firefox 暂不支持.而*+html 又为IE7特有标签.
注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
二、万能float 闭合(非常重要!)
关于clear float 的原理可参见[How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上class="clearfix" 即可,屡试不爽.
三、其他css 编写技巧(再次啰嗦)
1, FF下给div 设置padding 后会导致width 和height 增加, 但IE5.5不会.(可用!important解决) 2, 居中问题.
1).垂直居中.将line-height 设置为当前div 相同的高度, 再通过vertical-align: middle.( 注意内
容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)，不是所有居中都可以使用他的。
3, 若需给a 标签内内容加上样式, 需要设置display: block;(常见于导航标签)
4, FF 和IE 对BOX 理解的差异导致相差2px 的还有设为float的div在ie下margin加倍等问题. 5, ul 标签在FF 下面默认有list-style 和padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)（浏览器默认样式：ie设置的是margin,ff设置的是padding;）
6, 作为外部wrapper 的div 不要定死高度, 最好还加上overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于IE.
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
例：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
2 css布局中的居中问题
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释.
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0} ????????
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
4 浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同一行排列的的效果diplay:table;
5 IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个
然后CSS这样设计：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7 清除浮动
.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，
所以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
8 DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码
9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如
p[id]中,所有p标签中有id的都是同样式的.
10 IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。
例：
p对象中的内容
CSS：#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
Chrome Firefox IE Opera Safari如何实现文本自动
换行
七月5th, 2008 2 Comments FireFox文本自动换行处理，如何实现FireFox文本自动换行
文本自动换行IE中解决方法：
word-wrap:break-word;
word-break:break-all;
注：在要换行的内容相应的单元格或者DIV里加入，如：
或function toBreakWord(intLen, id){
var obj=document.getElementById(id);
var strContent=obj.innerHTML;
var strTemp=”";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+”
”; strContent=strContent.substr(intLen,strContent.length); }
strTemp+= strContent;
obj.innerHTML=strTemp;
}
注：以上脚本放在前面.
调用时如下写法：
同个页面单处调用：
language=”javascript”>toBreakWord(60, “content”);
同个页面多处调用：
language=”javascript”>toBreakWord(60, “content”);
language=”javascript”>toBreakWord(60, “content2″);
注：把应用的JS写在
这段JS，如果不是就要输出。
Firefox文本自动换行IE6/IE7/FF(火狐Firefox)及其他浏览器的兼容性通用解决方法
CSS部分
div类
1. 居中问题
div里的内容，IE默认为居中，而FF默认为左对齐
可以尝试增加代码margin:auto
2. 高度问题
两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是height:100%;
但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：
.float_bottom
{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidde n;}
3. clear:both;
不想受到float浮动的，就在div中写入clear:both;
4. IE浮动margin 产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}
5. padding 问题
FF设置padding 后，div会增加height 和width，但IE不会（* 标准的XHTML1.0 定义dtd 好像一致了）
高度控制恰当，或尝试使用height:100%;
宽度减少使用padding
但根据实际经验，一般FF和IE的padding 不会有太大区别，div 的实际宽= width + padding ，所以div写全width 和padding，width 用实际想要的宽减去padding 定义
6. div嵌套时y 轴上padding 和marign 的问题
FF里y 轴上子div 到父div 的距离为父padding + 子marign
IE里y 轴上子div 到父div 的距离为父padding 和子marign 里大的一个
FF里y 轴上父padding=0 且border=0 时，子div 到父div 的距离为0，子marign 作用到父div 外面
7. padding，marign，height，width 的傻瓜式解决技巧
注意是技巧，不是方法：
写好标准头
"https://www.wendangku.net/doc/067470805.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div
宽尽量用margin，慎用padding，width算准实际要的减去padding
列表类
1. ul 标签在FF中默认是有padding 值的，而在IE中只有margin有值
先定义ul {margin:0;padding:0;}
2. ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}
显示类
1. display:block,inline 两个元素
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
display:table; //for FF,模拟table的效果
display:block 块元素，元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
，