2010-11-02
1。圖片問題
IE6添加圖片會產生2px的BUG,如果你不想產生這個BUG可以直接把圖片設置為背景也可以消除這個BUG,或者把層設置 font-size:1px;line-height:1px;
2。CSS的書寫建議
給CSS文件加注釋。注釋會為你今后的維護帶來方便,建議盡可能給CSS文件加注釋,不要擔心增加少量的字節。盡量簡寫CSS語法。比如顏色值"#FFFFFF"可以簡寫成"#FFF";"padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:20px"可以簡寫為"padding:30px010px20px;"。在定義技巧上有更多的節省技巧,隨著對CSS應用的熟練,你會不斷發現更好的辦法。
3。XHTML校驗的問題
target="_blank",這個語法在HTML4.0里是正確的,在XHTML1.0里是不允許使用的。解決的辦法之一是寫成target="new",另外一個辦法是用js處理所有的target;
樣式表好不要內嵌,將樣式表文件獨立出來易于維護。
4。用!important解決IE和Mozilla的布局差別
!important是CSS1就定義的語法,作用是提高指定樣式規則的應用優先權,重要的一點是:IE一直都不支持這個語法,而其他的瀏覽器都支持。因此我們就可以利用這一點來分別給IE和其他瀏覽器不同的樣式定義,例如,我們定義這樣一個樣式:
.colortest{ border:20pxsolid#60A179!important; border:20pxsolid#00F; padding:30px; width:300px;}
在Mozilla中瀏覽時候,能夠理解!important的優先級,因此顯示#60A179的顏色;在IE中瀏覽時候,不能夠理解!important的優先級,因此顯示#00F的顏色。
5。解決超鏈接訪問過后hover樣式不顯示的問題
改變CSS屬性的排列順序: 先后順序標準應為:a:link—a:visited—a:hover—a:active
6。Li中內容超過長度后以省略號顯示的方法
7。margin和padding定義尺寸的縮寫
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;上右下左。
8。解決IE不能正確顯示透明PNG——header內加入代碼
9。BOX模型在firefox和IE中的解釋相差2px的解決方法
div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反。根據上面提到的IE并不支持!important,所以在IE下其實解釋成這樣:
div{maring:30px;margin:28px}
重復定義的話按照后一個來執行,所以不可以只寫margin:XXpx!important;
10。margin的默認效果
div里的內容,ie默認為居中,而ff默認為左對齊。使ff內容居中的方法是增加代碼margin:auto;