CSS学习笔记-浏览器兼容性（十）
什么是浏览器兼容性
当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。解决兼容性问题大致有三种办法。
全局CSS样式设置
常用CSS兼容性样式
CSS HACK
浏览器市场份额统计
http://tongji.baidu.com/data/browser
全局CSS样式设置
1、清除网页中所有标签的内外边距
body,div,ul,li,ol,a,span,h1,h2 { margin:0px; padding:0px;}
2、全局字体设置
body{ font-size:12px; font-family: simsun,arial,helvetica; background:#fff; }
3、标题样式设置
h1{padding:11px 0 0; margin-bottom:4px;font:normal 20px/30px 黑体;text-align:center;}
h2 { padding:6px 0 0; margin-bottom:4px; font:normal 20px/30px 黑体; text-align:center; }
h3{font-size:12px}
h4{font-size:12px;font-weight:normal}
4、项目符号和编号
ul,ol,li{ list-style: none ; }
全局样式设置
5、图片
img{ border:none; }
6、超级链接
a{ text-decoration:none; cursor:pointer; }
a:link,a:visited{ color:#004276; }
a:hover{ text-decoration:underline; color:#ba2636; }
7、清除与浮动
.floatLeft{ float:left; }
.floatRight{ float:right; }
.clear{clear:both; }
.blank10{height:10px; overflow:hidden; clear:both; }
8、字体颜色
.black {color:#000;}
.white {color:#fff;}
.red {color:#e10007; }
.grey {color:#454545;}
.orange {color:#ff7200;}
.blue {color:#3a8ecf;}
**其它常用CSS兼容问题**
---------------
布局页面水平居中
--------
使用div布局时，要想让整个网页居中显示，不同浏览器显示效果不一样。在IE下要想让box层居中显示，使用text-align就可以了；但在Firefox下不起作用，需要在box上加margin:0px auto来实现。因此满足所有浏览器的效果，则可将两种代码整合。 如下例所示：
<style type="text/css">
body{ margin:0px; padding:0px; text-align:center; }
.box{ text-align:left; margin:0px auto; }
style>
<html>
<body>
<div class="box">测试内容div>
body>
html>
DIV中单行内容垂直居中（例如：新闻标题）
<style type="text/css">
.title{ height:30px; line-height:30px; text-align:center;}
style>
<html>
<body>
<div class="title">新闻标题div>
body>
html>
IE中DIV浮动时，margin左右加倍的问题
设置为float的div在IE下设置的margin会加倍。这是一个IE6都存在的bug。解决方案是在这个div里面加上display:inline;
<style type="text/css"> .div{
float:left;
margin:10px;
display:inline;
} style>
IE6下无法定义1px行高的容器
为什么无法定义1px左右高度的容器，IE6下这个问题是因为默认的行高造成的。解决办法：overflow:hidden
.blank1{
height:1px;
overflow:hidden;
background-color:#ccc;
}
cursor:hand和cursor:pointer
问题说明：firefox不支持hand，但ie支持；两者都支持pointer ，两者都是手形指示。 解决方法：统一使用pointer。
CSS HACK
CSS HACK概述
由于不同的浏览器，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。CSS Hack大致有2种表现形式，CSS类内部Hack、选择器Hack，CSS Hack主要针对IE浏览器。
CSS HACK分类
类内部HACK
类内部HACK书写顺序：FF－ IE7－ IE6
a)通用代码
div{ background-color:#990000; }
b) "*" 能识别IE6和IE7
div { *background-color:#990000; }
c) "_"只能识别IE6
div { _background-color:#990000; }
选择器HACK
A）"*html"能识别IE6
*html .box { background-color:#990000; }
B) "*+html"能识别IE7
*+html .box{ background-color:#990000; }
书写CSS HACK注意事项
书写顺序，一般是将识别能力强的浏览器的CSS写在前面。
一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack
css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。