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;}