CSS 问题小记录li 比 img 高出3px 或 4px 有大用

很希望自己能做好，并且作为以后自己的发展方向。

入职了几天，凭心而论，学到了不少的东西。然而还有更多的东西等着我去学习、去发掘、去努力。

工作是前端开发，也就是PSD2HTML党~，说难不难，说容易也不容易。

以前没有这方面的经验，有许多问题都没有遇到过，不过还好，基本上可以在谷歌或者DEBUG之后解决，
总算还对得起自己、对得起老大对我的认可。

写几个遇到的问题。

1. IE6下 li或者dl float之后，里面有img标签会导致li高度比预计多4px

   先看一段HTML代码

   <ul>
       <li><img src="img/icon.jpg"  /> </li>
       <li><img src="img/icon.jpg"  /> </li>
       <li><img src="img/icon.jpg"  /> </li>
   </ul>
   

   CSS:
   ul{list-style: none;}
   li{float:left;}
   img{width:60px;height:60px}

   这段HTML在FF、Chrome、Opera下都没问题，但在IE下则会现一个诡异的问题：li实际高度是64px；比预期的60px
   多了4px。li的宽高应该是由img撑起来的，那么li的宽高应该也是60px，但li的高度是64px.

   问题的根本原因不太清楚，应该是和IE的渲染模式有关系。估计是IE下 Text：Empty Text Node
   的问题。
   解决方案呢也很简单，将img的display设置为block

   图文模式

       <ul>
           <li><img src="head.jpg" alt=""  /><span>sssss</span></li>
           <li><img src="head.jpg" alt="" /><span>sss</span></li>
           <li><img src="head.jpg" alt="" /><span>sss</span></li>
       </ul>
   

   CSS

   ul{list-style: none;}
   li{float: left;}
   img{width: 60px;height: 60px;}
   span{display: block;}
   

   图文模式其实不一定必须将img设置为display:block，也可以将文字display：block。总之出现一个display:block的元素即可打破 “4px的魔咒” "有的浏览器好像是3px" 也可以直接给li加个高度

2. 依然是float引起的问题

   相信很多人在使用DW的兼容性检测的时候都会看到DW提示IE6的BUG：float之后如果float的元素的子元素尺寸大于该元素后，将会撑大该元素而不会出现overflow:hidden;看似没什么大问题，不过有时候这个小细节也会引起一些问题.

   <ul>
       <li><img src="img/icon.jpg"  /> </li>
       <li><img src="img/icon.jpg"  /> </li>
       <li><img src="img/icon.jpg"  /> </li>
   </ul>
   

   CSS:

   ul{list-style: none;}
   li{float:left;width:30px;}
   img{width:60px;height:60px}
   

   同样IE无敌了 -。- IE解析出来li的width是60px，而不是30px，而FF、Chrome则是30px；
   可以将li设置overflow:hidden来解决内容撑大。

3. IE 多出来的1px.

   这个问题比较坑，IE中如果尺寸设置的是奇数，那么在渲染之后，尺寸会多出来1px。比如一个div的width是309px，那么在IE中解析之后这个div的width
   会是310px，而不是309px，虽然只是1px，但可能会引起你精心规划好的布局乱掉。
   我在写的时候３个div float之后，width是309px,其他浏览器中正常，在IE中折行了，一看，IE中div的width变成了310px,于是就超出父容器的尺寸导致IE折行了。
   所以在设置的时候，尽量不要使用奇数，而采用偶数设置.
   这也就解释了老大为什么不让用奇数尺寸了。

4. IE经典的双margin问题

   IE中元素float之后，如果有margin，那么则会出现双margin的问题。同样双边距的问题相对来说较常见，也比较容易解决。
   将float的元素设置display:inline即可。(也可以将其它浮动内的非浮动元素设为 block) (当然 用 _margin 也可以)
   (还有 有时可以把 margin 变成 padding)

   元素float之后，其display自动变为block;
   
   
   
   来自  http://wuyixiang.sinaapp.com/css-%E9%97%AE%E9%A2%98%E5%B0%8F%E8%AE%B0%E5%BD%95/