网页设计中一些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来显示转变的边框。