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

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

測试的浏览器:IE7、IE8

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

浏览器的标准模式与怪异模式两种械,怎样区分这两种模式?
加上<!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的效果是:

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

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

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

在CSS样式表中最后一个选择器 *html是什么意思呢?

本人在ie8 ie7浏览器下測试,文本模式选择设置为杂项时。*html请作用

05-26 20:20