ie6 双边距

在ie6中使用float属性的注意事项!  它的源代码和实验结果如下!
 <style type="text/css">  div#demo1,div#demo2{ height:150px; width:150px; border:1px solid #0000FF; background:#99CC00;}  #parent{ height:200px; width:600px; border:1px solid #FF0000; margin:0 auto;} #demo1{ margin-left:50px; float:left;} #demo2{ margin-right:50px; float:right;} </style> </head> <body>  <div id="parent">  <div id="demo1"></div> <div id="demo2"></div> </div> 
</body
>    而在ie6以上的版本中和firefox中的实验结果如下!


ie6 双边距 ie6 双边距
  
我们可以很明显的看到,在ie6以及firefox浏览器中,离红色边框的距离要小的多!而ie6距离边框的距离是ie6以上版本的二倍,这是ie6中特有的现象——双倍边距。     如果我们想解决这个问题我认为有两种方法!   1#demo1,#demo2{ display:inline}    2专门针对ie写语句 <!--[if IE 6]>  <style typte="text/css"> #demo1{ margin-left:25px;} #deom2{marign-right:25px; </style> <![endif]--> 就搞定了!    至于3像素问题:  就是说在ie6中环绕在元素周围的内容会自动的增加3像素的距离! 解决方案:  针对这个问题,我们也可以专门针对ie6写样式!此方法与上面类似。就省略不写了!

你可能感兴趣的:(ie6)