DIV浮动IE文本产生3象素的bug

 描写叙述：DIV浮动IE文本产生3象素的bug    左边对象浮动。右边採用外补丁的左边距来定位，右边对象(div)会离左边有3px的间距

复现：在开发者工具里把文本模式设置了杂项后会出现3像素的bug

測试的浏览器：IE7、IE8



浏览器的标准模式与怪异模式两种械，怎样区分这两种模式？
加上<!DOCTYPE html>是标准模式，反则去掉是怪异模式(杂项模式)。
调用下面JS代码来推断属于那种模式：
console.log(window.top.document.compatMode) ;
//BackCompat  表示怪异模式
//CSS1Compat  表示标准模式
CSS:
  #box {
    width: 600px;
    height:100px;
    margin:100px auto;
    background:blue;
  }
  #left {
    float: left;
    width: 50%;
    height:100px;
    background:red;
  }
  #right {
    width: 100%;
    height:100px;
    background:yellow;
  }
  *html #left {
    margin-right:-3px;
    /* 上面这句是重点 */
  }

HTML：
<div id="box">
  <div id="left">1</div>
  <div id="right">|2</div>
</div>

不加margin-left:-3px的效果是：


加margin-left:-3px的效果是：



在CSS样式表中最后一个选择器 *html是什么意思呢？
本人在ie8 ie7浏览器下測试，文本模式选择设置为杂项时。*html请作用





   







            

            
posted @ 
2017-07-25 20:38 
mfmdaoyou 
阅读(159) 
评论(0) 
编辑 
收藏 
举报