DIV+CSS浏览器兼容性分析

1、用!important语法解决IE和其它浏览器之间的布局差别

　　!important是CSS1定义的语法，作用是提高指定样式规则的应用优先权。目前IE一不支持这个语法，而其他的浏览器则都支持。可以利用这一点来定义不同浏览器间的CSS样式。

如下样式：

　　.sidebar{ border:5px dotted #FC5 !important ; border:5px dotted #00F; padding-top:20px; margin:0 auto;}

　　IE中浏览时候由于它不能够解释!important语法，因此边框显示的颜色为#FC5；能完全解释出!important语法的浏览器则把.sidebar边框的着色显示为#00F。

2、访问过后超链接a:hoverr的样式不显示

　　 改变CSS属性的排列顺序，先后顺序标准应为：
　　a:link -> a:visited -> a:hover -> a:active

3、Li中内容超过长度后以省略号显示的方法

　　li { width:250px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden;}
　　<ul>
　　　　<li>Li中内容超过长度后以省略号显示的方法</li>
　　　　<li>Li中内容超过长度后以省略号显示的方法</li>
　　</ul>

4、定义margin和padding尺寸的缩写（TRBL）

　　margin:3px; 表示所有边都是3px；
　　margin:3px 5px; 表示top和bottom的值是3px ,right和left的值是5px
　　margin:3px 5px 7px; 表示top的值是3，right和left的值是5，bottom的值是7
　　margin:3px 5px 7px 5px; 四个值依次表示top,right,bottom,left上右下左。

5、IE不能正确显示透明PNG图片

　　header内加入：

程序代码

<script language="javascript">
　　function correctPNG(){
　　　for(var i=0; i<document.images.length; i++){
   　　　　var img = document.images[i]
   　　　　var imgName = img.src.toUpperCase()
　　　　　　if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){
　　　　　　　　var imgID = (img.id) ? "id='" + img.id + "' " : ""
　　　　　　　　var imgClass = (img.className) ? "class='" + img.className + "' " : ""
　　　　　　　　var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
　　　　　　　　var imgStyle = "display:inline-block;" + img.style.cssText
　　　　　　　　if (img.align == "left") imgStyle = "float:left;" + imgStyle
　　　　　　　　if (img.align == "right") imgStyle = "float:right;" + imgStyle
　　　　　　　　if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
　 　　　　　　　var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=/"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=/'" + img.src + "/', sizingMethod='scale');/"></span>"
　　　　　　　　 img.outerHTML = strNewHTML
　　　　　　　　i = i-1
　　　　　　　}
　　　　　}
　　　}
　　window.attachEvent("onload", correctPNG);
</script>

6、ul在Firefox和IE下表现不同

　　ul在Firefox下有padding值，没有margin值。IE下则相反，ul有margin值，没有padding值
　　在Firefox下，ul的list-style默认是处于内容的外边缘的。
　　构建网站时CSS样式可写为：
　　padding:0; margin:0; list-style:inside;
或
　　padding:0; margin:0; list-style:none;

7、BOX模型在firefox和IE中的解释相差2px的解决方法

　　div{margin:30px !important ; margin:28px;}

　　仍是利用IE不支持 !important 这个语法而来写CSS样式。注意margin的顺序，IE并不支持!important，故在IE下解释后的样式是div{maring:30px;margin:28px}，当有重复定义值时按照最近优先的原则来取值。

8、margin的默认效果

　　div中的内容，ie默认为居中，而ff默认为左对齐。使内容居中的方法是将CSS样式定义为：div{margin:auto;}