[转] CSS常见浏览器差异性

（1）文字本身的大小不兼容：
　　
　　同样是font-size:14px;的宋体文字，ie下的实际占高是16px，下面留白3px，而ff实际占高是17px，上留白1px，下留白3px，oprea下更不一样。解决办法：给文字设定line-height,确保所有的文字都有默认的Line-height值。
　　
　　（2）ff下容器高度限定：
　　
　　即容器设定了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大的，高度限定失效。所以不要轻易地给容器定义heihgt。
　　
　　（3）横向上的撑破容器问题：
　　
　　 如果float容器未定义宽度，ff下内容会尽可能的撑开容器宽度,ie下则会优先考虑内容折行。所以内容可能撑破的浮动容器需要定义width。
　　
　　（4）double-margin bug。ie6下给浮动元素定义margin-left或者margin-right时，实际效果是数值的2倍。
　　
　　解决方案：给浮动容器定义 display:inline.
　　
　　(5) mirror margin bug，当外层元素内有float元素时，外层元素如果定义margin-top:15px,便会自动的生成margin-bottom:15px，
　　
　　padding也是如此，都是ie6下的‘杰作’。解决方案：外层元素设定border或者float。
　　
　　（6）吞吃现象：
　　
　　还是ie6下面的问题，上下两个div，上面的div设定了背景，却发现下面的div也有了背景。对应上面的背景吞吃现象，还有滚动下边框确实的现象。解决方案：zoom:1。这个zoom好像就是专门为解决ie6的bug而设计的。
　　
　　（7）img下面的留白：1


　　
　　
　　把div的border打开，你会发现图片底部不是紧贴着容器底部的。这是由于img后面的空白字符造成的。要消除空白必需如下这么写：1


　　
　　
　　后面的两个标签要紧挨着。ie7下面这个问题依然存在，解决方案：给img设定display:block。
　　
　　（8）失去line-height：
　　
　　
文字内容
,在ie6下会发现单行文字line-height效果消失了。原因是：这个inline-block元素和inline元素写在一块了。解决方案：让img和文字内容都float起来。
　　
　　（9）clear层应该单独使用：
　　
　　例如：
。否则容易是一些内容层的属性失效。
　　
　　（10）ie下的overflow:hidden对齐其下的绝对层或者相对层无效。解决方案：给overflow:hidden 加 position:relative 或者position:absolute 。另：ie6支持overflow-x和-y，ie7和ff不支持。
　　
　　（11）ie6，float如果没有定义宽度，内部如果有div定义了height或者zoom:1，这个div就会占满一整行，即使你给了宽度。所以：float元素如果作为布局用或者复杂的容器，都要给个宽度的。
　　
　　（12）ie6，绝对定位的div下包含相对定位的div，如果给内层相对定位的div的height具体值，内层相对层将具有100%的width值，外层的绝对层将会被撑大。解决方案：给内层相对层float属性。