总结写DIV+CSS时常见的小问题_html/css_WEB-ITnose

  1. ul和li属性的问题

　　默认的ul的内外补丁（margin、padding）都不是0，如果在li中用到的左漂浮属性（float:left;）时往往会把外部div撑大，导致页面变形，而且在ie6里，第一个li会有一个小小的缩进值，最终导致排版出问题。解决div层不被撑大时应将层的内外补丁设为0即可（margin:0;padding:0;），而解决第一个li有缩进值时则应该定义li为块状显示（display:inline;）即可

2. img属性的问题

　　这里牵涉的不同浏览器的问题，ie6是一直让网页设计师最头疼的一个问题。页面插入img时在ie6里有时图片显示的高度总是要大于准确值，会多出下面的2px的误差，解决方法是给img定义一个显示属性：img{float:left;}即可

3. overflow属性的问题

　　此属性用的最多的地方就是文本域、注册协议等，因为文字篇幅比较大，但又不想占用大的页面篇幅，这里就可以定义好层的宽度和高度值，然后加上overflow:auto;属性。

4. float属性问题

　　有时会在水平方向上漂浮2个或2个以上的div层，都使用了float:left;属性，最终导致下面的层会漂浮到该水平方向上来，导致页面显示非常混乱，不注意的话在排错阶段也很难找出问题所在。对待float属性一定要谨慎，解决以上问题方法有二，第一是将这几个漂浮的层的父级层定义clear:both;属性；第二是将这几个层的宽度值加起来的值等于父级元素的宽度值，这样下面的层自然不会漂上来。

5. height值不统一

　　当height为1px时，在ie6中可能并不是1px而是超过1px，怎么解决呢？方法有两种，第一种是直接将该div层里的字号设为1px就可以了（font-size:1px;），第二种方法是在该div层里设置行高即可（line-height:1px;），但这里需要提醒下，在ie6里该层不能为空，可以写一个空格字符（ ）即可。 

6. css编码问题

　　很多人写页面的时候习惯通过dw软件来创建一个html页面，但往往又忽略了其默认编码格式的设置，最终导致页面显示乱码。@charset "utf-8"注意这行代码，utf-8与gb2312是比较常用的两种编码方式，选择与之匹配的编码格式，避免出现乱码。

7. 关于选择器的选择（class和id）问题

　　当一个div要在页面中多次使用时，不要用id，要用class，还有就是要用引用js的时候，样式最好不要用id，因为id要留给js使用，当程序员写后台用的是.net时，最好不要用id，id要留给程序员用，前台我们就用class好了。

8. div层高度自动扩展问题

　　就是div层的结构很复杂，用了至少2个以上的div层，在定义好最小高及高度为自动，但最后超过层高度后导致在ff中显示为高度不自动扩展，解决ff不兼容方法很简单，只要加上：overflow:hiiden;即可。

9. 常用的兼容属性写法问题

　　这里具体实例不列出了，估计长篇大论的也没问会看，我就把常用到的兼容性属性列出来，具体灵活运用就靠自己啦！建议定义属性时书写顺序为FireFox在最前，其次是IE8、IE7，最后是IE6。

　　①!important属性只对ff生效，如：width:200px!important;width:100px;则ff里宽度显示为200px

　　②带“_”的属性只对ie6生效，如：color:red;_color:blue;则ie6里字体颜色为blue

　　③带“+”的属性只对ie7生效，写法如上

　　④ff什么都不识别，但样式中加上上述小符号，则优先对特定浏览器生效，例如css定义为：color:yellow;+color:blue;_color:red; 则输出效果为ff显示黄色，ie7显示为蓝色，ie6显示为红色