IE6双倍margin间距解决方案

      问题：在IE6下如果某个标签使用了float属性，同时设置了其外补丁“margin:10px 0 0 10px”可以看出，上边距和左边距同样为10px，但第一个对象距左边有20px。

     解决办法：

　　方法一、当将其display属性设置为inline时问题就都解决了。

     说明：这是因为块级对象默认的 display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。也许你会问：“为什么第二个对象和第一个对象之间就不存在 双倍边距的BUG”？因为浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的，而第二个对象是相对第一 个对象的，所以第二个对象在设置后不会出现问题。另外在一些特殊布局中，可能需要组合使用display:block;和display:inline; 才能达到预期效果。
当然最坏的情况下，我们就可以使用"margin:10px 0 0 10px;_margin:10px 0 0 5px"，这种“标准属性;_IE6识别属性”HACK方式解决。

     注意：这个现象仅当块级对象设置 了浮动属性后才会出现，内联对象（行级对象）不会出现此问题。并且只有设置左边距和右边距的值才会出问题，上下边距不会出现问题。使用 display:inline方法仅限于使用float时使用，否则显示会出现问题。多个子块在父块中使用float时，同行显示的多个子块只需要第一个 使用display:inline

 

     方法二、

 

 

    可以使用以下办法来书写兼容浏览器的css代码:

 

    第一种

 

  1. ：.div{  
  2. background:orange;/*ff*/  
  3. *background:green!important;/*ie7*/  
  4. *background:blue;/*ie6*/  
  5. }  
  6.  

 

    第二种

 

  1. ：.div{  
  2. margin:10px;/*ff*/  
  3. *margin:15px;/*ie7*/  
  4. _margin:15px;/*ie6*/  
  5. }  

 

    第三种

 

  1. ：#div{color:#333;}/*ff*/  
  2. *html#div{color:#666;}/*IE6*/  
  3. *+html#div{color:#999;}/*IE7*/  

 

posted @ 2013-10-28 15:42  Otgs  阅读(298)  评论(0)  编辑  收藏  举报