Browser Compatibility
Browser Compatibility
1. 每个浏览器的默认值不一样，所以我们在写CSS的时候，首先得重置标签的margin值和Padding值等，例如：（这个一个reset.css文件，每个页面都要link这个文件）
html, body, h1, h2, h3, h4, h5, h6, p,ol, ul, li, pre, code, address,variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight:normal;
}
table { border-collapse: collapse;border-spacing: 0; }
td, th, caption { font-weight: normal;text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style:decimal; }
ul { padding-left: 1.4em;list-style:square; }
q:before, q:after { content:''; }
2. "\9" 例:"border: 1px \9;".这里的"\9"可以区别所有IE和FireFox.
"\0" IE8、IE9识别，IE6、IE7不能.
"*" IE6、IE7可以识别IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.
background-color:blue\9\0; 仅IE9支持；
各浏览器CSS hack兼容表：（如表2.1）
|
|
IE 6 |
IE 7 |
IE 8 |
IE 9 |
Chrome |
Firefox |
Safari |
| !important |
|
Y |
Y |
Y |
Y |
Y |
Y |
| - |
Y |
|
|
|
|
|
|
| * |
Y |
Y |
|
|
|
|
|
| *+ |
|
Y |
|
|
|
|
|
| \9 |
Y |
Y |
Y |
Y |
|
|
|
| \0 |
|
|
Y |
Y |
|
|
|
| \9\0 |
|
|
|
Y |
|
|
|
| nth-of-type(1) |
|
|
|
|
|
|
Y |
表2.1 各浏览器CSS hack兼容表
3.cursor:pointer可以同时在 IE FF中显示游标手指状， hand仅 IE 可以
4. 设置为float的div在IE下设置的margin会加倍。这是一个IE6都存在的bug。解决方案是在这个div里面加上display:inline;
5.IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
解决方案：min- width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个＜div>放到＜body>标签下，然后为div指定一个类,然后CSS这样设计：
#container{min-width: 600px; width:expression(document.body.clientWidth ＜ 600? "600px": "auto" );}
6. DIV浮动IE文本产生3象素的bug
7.IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
8. IE6-7下为什么图片下有空隙产生
解 决这个BUG的方法也有很多,可以是改变html的排版,或者设置 img为display: block 或者设置vertical-align属性为 vertical-align: top | bottom |middle |text-bottom 都可以解决.
9. 为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html
10.UL的padding与margin
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
11.最狠的手段 - !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下
.tabd1{
background: url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Stylefor FF*/
background: url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将xxxx !important 这句放置在另一句之上。
12. FF下给div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
13. 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中.margin: 0 auto;(当然不是万能)
14. 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
15. FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下margin加倍等问题.
16. ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
而在IE中只有margin有值。
解决：
定义ul{margin：0；padding：0;}就能解决大部分问题。
17. 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
18. IE6 不支持伪类和伪元素
伪类：
a:hover
伪元素：
:before
:after
:first-child
:last-child
:focus
19. 关于高度问题
问题：如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。
如果设定了高度，内容过多时，IE6下会自动增加高度,其他浏览器会超出边框。
解决：
1. 设置overflow： hidden;
2. 高度自增height： auto !important; height:100px;
20. list-style-position默认值的问题
问题：
IE下list-style-position默认为inside， Firefox默认为outside
解决：
CSS中指定为outside即可解决兼容性问题。
21. list-style-image准确定位的问题
问题：
li 前设置图片时，图片与其后的文字对齐问题
解决：
1. 采用背景定位和字符缩进的方法
background：url() no-repeat left center;
text-index: 10px;
2. 采用相对定位方法
li 设置list-style：url（）；
li 的子元素position: relative; top:-5px;
22. IE6 width为奇数，右边多出的问题的问题： 父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1像素
解决：将宽度的奇数值改成偶数