CSS浏览器差异、BUG总结
DOCTYPE 影响 CSS 处理
IE6经典Bug之双倍边距
1. 现象：
这个bug非常常见，如果发现IE6里的某个距离变大，首先考虑是否是双倍边距问题。IE6双倍边距即IE6下的margin值翻倍，即：假如设置的属性是margin-left:20px,那么在ie6中的效果就是margin-left:40px。
注意：padding也是同样，也是同样处理
2. 出现条件：
1、存在于父元素与子元素之间
2、子元素同时设置了浮动和外边距属性
3、并且浮动方向与外边距方向一致（如:同时设置了margin-left和float:left）
3. 解决办法
将div的display设置为inline
Margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：
<div id=”imfloat”>
相应的css为
#IamFloat
{
float:left; margin:5px;/*IE6下理解为10px*/
display:inline;/*IE6下再理解为5px*/
}
IE6中DIV高度小于10px时高度无效。
我们只要把字体设为0就可以解决。
例如：.mm{height:3px; font-size:0}
IE6下div图片下边4px空隙bug的解决办法
<div><img/></div>或<a><img/></a>这种情况经常见：IE6点击图片时虚框会多出个尾巴来
1、设置父对象的文字大小为0px
#bannerPic{
font-size: 0px;
}
即，在#sub中添加一行：“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。
2.或者
#bannerPic img{
display: block;
}
移除超链接的虚线
FireFox下,当你点击一个超链接时会在外围出现一个虚线轮廓. 这很容易解决, 只需要在标签样式中加入：
a{
outline: none;
}
并且为了去掉IE6,IE7中的虚线，同时应加以下代码：IE6下常见哦！！
<a id="test" href="#" hidefocus="true">去掉虚线框</a>
或(jquery)
$(function(){
$("a").attr("hideFocus",true);
});
行内、外元素
行内元素包括: <span>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>和<li> . 如果你给一个行内元素定义宽度、pading等,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素. 你不能定义行内元素的宽度, 为了解决这个问题你可以将行内元素转变为块元素.
span { width: 150px; display: block }
block与inline两个元素：
block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);
Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);
! important
div{margin:30px!important;margin:28px;}
注重这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE6不能识别，但别的浏览器可以识别。所以在IE6下其实解释成这样：
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
包含float的box的高度自动适应
当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：
以下为引用的内容：
.colwrapper{
overflow:hidden;
zoom:1;（IE6必须使用这句话）
margin:5px auto;
}
让固定宽度的页面居中
为了让页面在浏览器居中显示, 需要相对定位外层div, 然后把margin设置为auto.
#wrapper {
margin: auto;
position: relative;
}
只要外层有一个DIV居中就可以了，DIV里面的其它DIV宽度写死就可以
不定长度的浮动元素居中
我的做法是把他们放在一个固定宽度的DIV中，让固定宽度的DIV居中就可以了
css的优先级，
一个标签选择器1分，一个类选择器10分，一个id选择器100，一个行内样式1000，！important就当无限分吧，呵呵。分值相同时按后出现优先的原则算
CSS优先级【特例：背景】
外部文件background:url(图片1)
文件内部：background:url(图片2)
最终显示是：图片1
鼠标样式：cursor: pointer
可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
IE对list-style-type、border-style支持不全
给元素设置background-color背景色时，IE为content+padding而firefox则content+padding+border
IE与Firefox处理margin处理区别
倘若设定了父元素的高度，如果此时子元素的高度超过了父元素设定的高度，二者显示不同。
IE：父DIV的高度值小于子块的高度加上margin的值，此时IE会自动扩大，保持子元素的margin-bottom及父元素的padding-bottom。
Firefox：它会保证父元素的高度值完全吻合，而这时子元素将超过父元素的范围。见10-12.html
IE6及IE7及火狐不支持position的fixed
IE6无法触发a:hover【情况一】
<a>test</a>像这种无法触发hover，必须<a href>即必须加上href才行
IE6无法触发a:hover【情况二】
a:hover{color:#F00;}
<a href="?">鼠标经过时改变我的颜色</a>
以上是正确的。
a:hover em{color:#F00;}
<a href="?">鼠标经过时改变我的<em>颜色</em></a>
以上IE6无法识别。
解决方案：只需要再添加一个a:hover{}样式就可以解决这个问题了，里面可以是zoom, padding, margin等属性。如下：
a:hover{zoom:1;}
a:hover em{color:#F00;}
<a href="?">鼠标经过时改变我的<em>颜色</em></a>
其实：不论你在a:hover{}写入任何属性，color啊，font-size啊，overflow啊（甚至是不存在的属性，如xx:yyy），都可以
DIV垂直居中问题
vertical-align:middle;
将行距增加到和整个DIV一样高 line-height:200px;
然后插入文字，就垂直居中了。缺点是要控制内容不要换行。
也可以放span，即行内元素不能块
DIV水平居中问题
div设置 margin-left, margin-right 为 auto 时已经居中。
如果还不行，就给加个边框，有可能边框已经居中，只是边框太宽了。
各浏览器的BUG列表网址
http://developer.51cto.com/art/200908/143733.htm
min-height
IE6不认min-height,但IE7,IE8，FF识别,利用以上这些属性，我们可以这样定义最小高度
Html代码
- <style rel="stylesheet" type="text/css">
- <!--
- .content{background:#a5a5a5;height:auto!important; height:500px; min-height:500px;}
- -->
- </style>
<style rel="stylesheet" type="text/css">
<!--
.content{background:#a5a5a5;height:auto!important; height:500px; min-height:500px;}
-->
</style>
我是这样理解这段代码的：
因为在IE里（包括IE6,IE7）认为height就是最小高度，当content中的内容超出设置的高度时，在FF中可以用min-height设置最小高度××，这时即使超出content的高度，背景颜色也会自动延伸下去。但IE不识别min-height，所以要加hack（对程序所作的修改，在尚未被开发者接受并集成到正式版本中之前被称为hack）。
这个常用于：
框架：<iframe id="queryDetailFrame"
name="queryDetailFrame_Name"
allowtransparency="true"
height="450"
>
</iframe>
子页面：<body style= "width: 100%;background-color: #FFF;height:auto!important;height:450px;min-height: 450px;">
而子页面的高度小于500，则多出的颜色就会被其它颜色填充如外部的html{background颜色},这时要利用min-height使得子页面有个最小高度，即450px
表格样式
Border样式只能用在td,而不能tr
Iframe嵌套间隙过大，之间的间隔调整为大概5-6px
设置iframe的属性 marginheight= "0 " marginwidth= "0 "