網頁設計中一些CSS的元素的使用技巧

一、代碼優化問題總結：

1、削減瀏覽器兼容差異（用固定圖片代替不兼容效果，如：“圓角”屬性）

2、保證DW視圖不變形（削減框架自適應，鎖定寬高，DW視圖無瀏覽器默認屬性）

3、firefox中縮放不變形（float元素用背景色差做邊線，別用1px  border）

4、不同分辨率下背景變形（100%背景時，加min-width限制）

5、圖片背景上放文字進行優化后，如何隱藏

（1、文字層自力出去：position:absolute; 2、文字層放下面去：z-index:-1px；也別用透明色）

二、IE6兼容優化：

1、inpit不支撐border:none（通用：input {border-width:0px;}）

2、不能繼續父屬性（使用時給具體定位具體屬性）

3、外部CSS文件不能自識別編碼（請按編碼保存并聲明）

4、z-index層屬性無效（用輩份提拔顯示級別）

5、內容溢出導致布局變形（overflow:hidden）

6、重復字符（浮動元素好后跟一個clear:both的div）

7、ul和li有基礎街高（ul樣式加font-size:0;）

8、浮動元素有雙外邊距（浮動元素加display:inline）

9、3像素問題（給顯示元素保留至少3px的余地，即它看似不占地方——定位走了）余地計算公式：外margin×2+內margin≤總空間－3px鄰邊數。

10、少用不用浮動border（其實我也糾結該用什么了）

三、去掉在IE6中默認的左邊距IE中默認有padding-left：就算用!important來做hack（修正），將它設置為0，仍然存在左邊距的，（IE默認項目符號在內部，而是為項目符號預留位置）

解決的四種方法：

1、list-style-position:outside

2、設置寬度后再定義vertical－align:bottom

3、定義寬度外面再加一個寬度讓不產生空白行距。

4、List-style：none;

在做設計的時候，無論用什么效果，要做到誰的問題誰解決。意思就是：假如給li邊框效果，當鼠標經過變邊框顏色時無論里面的a 是否與li相同寬高，也不能用a來顯示轉變的邊框。