描写叙述:DIV浮动IE文本产生3象素的bug 左边对象浮动。右边採用外补丁的左边距来定位,右边对象(div)会离左边有3px的间距
复现:在开发者工具里把文本模式设置了杂项后会出现3像素的bug
測试的浏览器:IE7、IE8
浏览器的标准模式与怪异模式两种械,怎样区分这两种模式?
加上<!DOCTYPE html>是标准模式,反则去掉是怪异模式(杂项模式)。
调用下面JS代码来推断属于那种模式:
console.log(window.top.document.compatMode) ; //BackCompat 表示怪异模式 //CSS1Compat 表示标准模式
CSS:
#box { 600px; height:100px; margin:100px auto; background:blue; } #left { float: left; 50%; height:100px; background:red; } #right { 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的效果是:
在CSS样式表中最后一个选择器 *html是什么意思呢?
本人在ie8 ie7浏览器下測试,文本模式选择设置为杂项时。*html请作用