【原】css浏览器兼容总结

由于某度众所周知的举动，让我搬离写了5年的渣度空间，准备把技术性的文章定在CSDN了。这些都是文章备份。勿怪。。

鉴于最近有些抓取机器和抄袭者，把标题的【原】字都复制，我不得不声明：本文为 yukon12345原创，转载请注明出处http://blog.csdn.net/yukon12345

好久没搞美工，自己动手构了2个页面，结果什么兼容性问题都碰到了，

感觉实在受不鸟了，以后做些个性化的网站还是全站flash好了
总结一下。
有些老忘
（1）ie6 使用absolute 后消失：
解决方法：外面再套一个空白div或者 <!--[if IE 6]><div></div><![endif]-->
（2）ff用了margin:0 auto;text-align:center后还是无法居中：
解决方法：text-align:-moz-center !important;text-align:center
（3）兼容各浏览器的 高度自适应:
height:auto !important;height:200px;min-height:200px;
（4）连续英文字母无法换行：
解决方法：
word-break:break-all;
overflow:auto
（5）设置了line-height:0;margin:0;padding:0;之后ie6空白div仍然占位：
解决方法：font-size:0
（6）ie6左浮动的margin双倍错误:
解决方法：display:inline;
（7）疲于ie8的兼容：
解决方法：强制使用ie7解释引擎：
<meta http-equiv="X-UA-Compatible" content="IE=7" />

（8）float后ff对判定浮动div不占位的bug：
解决方法：后面加个div ，.class{clear:both}
（9）绝对定位居中法：
position:absolute;
left:50%;
margin-left:-宽度/2;

（10）设置a标签的样式时，需要加上：display:block

（11）ie6png透明：
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../page_img/vice_lbar_t.png");
_background-image: none;

（12）最终法：实在搞不定就用
height:200px;
*height:200px; /*ie6 7认识*/
_height:200px; /*只有ie6认识*/
*+height:200px; /*只有ie7认识*/

（13）ie6下左右浮动导致同一个父容器的绝对定位的div位置混乱：
在绝对定位div的底下加一个空白div

（14）ie6下里中左右浮动导致换行：（我擦，狗血的ie6）

比如<li><span>1</span><span>2</span></li>

任意一个span设置左右浮动，都会导致这换行。本来2个span都在同一行的。

解决方法：浮动的写前面。

(15) li标签中的元素浮动会行错位：http://bbs.blueidea.com/thread-2916152-1-1.html

不知道为何所有浏览器都有这个问题。是一个很令人头疼的问题

解决方法：把li float:left，再设定它宽度为px或百分比。。

(16)body设置text-align:center会导致ie下一些绝对定位层神奇的被截去一半，并且document.width值不正确

对于这种说不清楚的ie bug，我已经无力吐槽ie了。。。。

(17)ie6下label标签在div标签包裹，label设置float情况下，如果div设置了padding，margin，label会神奇的消失:

设置div的width即可显示。（w我整个人都斯巴达了。。尼玛啊！ie6）

 ===========update:2014-07-05========

(18)ie6这货不兼容直接css子标签选择器 ,希望win9时代ie6可以退散了

比如#menu li 会选择全部各级li，目前绝大多数浏览器都有#menu>li 的直接子级选择器

ie6中必须这么弄：

#menu + li {border:1px solid #000;}

+代表第一个子元素

或者

#menu li {border:1px solid #000;}

#menu li *{border:0}

其中*代表除了直接子级之外的所有li元素。两句结合就是直接子元素选择