IE的坏脾气——3像素Bug】的更多相关文章

在一个典型的浮动中,如下面的图片所示:灰色矩形是外部容器,绿色容器在外部容器内向左浮动,未浮动的部分包围着浮动部分.但是IE6在解析这样的浮动时,会莫名的给靠紧浮动部分的未浮动部分添加3个像素的边距.为了更加直观,让我们将Firefox和IE6中的效果做一对比(上图是Firefox中的效果,下图是IE6中的效果): 你会清晰的观察到IE6中的3像素边距Bug.为了确定到底是不是3个像素,我在Photoshop将图片放大到1600%,如下面的截图所示,的确是3个像素. 如何解决这个Bug? 如果这…
问题:2列布局.左列固定,右列液态我需要做一个布局.2列,左边列固定宽度.右边列使用剩余宽度.整体宽度不固定,这样不管在17 还是19的屏幕上,左边列始终宽度不变,右边列宽度始终占据剩余宽度.但是我写这个布局缺在ie6下面始终解决不了3像素bug.请在IE6下测试 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “<a href=”http://www.w3c.org/TR/1999/REC-html401-1999…
IE6的3像素bug3像素bug是IE6的一个著名的bug,当浮动元素与非浮动元素相邻时,这个3像素的Bug就会出现.看下面这个左列固定,右列液态的例子,css代码如下: body { margin:0;}#side { float: left; background:#99FF99; height: 300px; width: 120px;}#main { background: #99FFFF; height: 300px;} IE6会在两个div中间加上3px的空隙,那么要解决这个问题,请…
1.浮动元素后边跟不浮动元素时会产生3像素bug 2.解决办法是不要忘记给浮动元素的相邻元素加上浮动.…
1.IE6中第一个元素浮动第二个元素不浮动,这两个元素之间就会产生3像素BUG 2.解决方案: 2.1若若宽度一定则给第二个元素添加 float 样式即可: 2.2若宽度自适应: 2.2.1  _margin-right:-3px;   // IE6及更低版本均可解析下划线hack 2.2.2 * HTML作为一种hack来解决浏览器之间的不兼容 3.拓展:浏览器之间兼容 3.1 div{ padding-left:300px;                padding-left:250px…
发生条件:当浮动元素和非浮动元素相邻 时候,ie67下,两个元素就会多出3像素的间隔,其实是浮动元素产生的margin值 解决办法:1:让没有浮动的元素也浮动: 2:让浮动元素产生margin-*:-3px;…
<div><img src="...."></div> 给img的css设置display: block;/*用来去除div下边莫名多出来的3px的像padding-bottom的东西.注:vertical-align: middle; 亦可*/…
google的实现方式是: <div class="mw"> <a href="/" id="mlogo">  </a> <div id="tsfi" style="zoom:1"></div> </div> 图片可以作为a标签的背景或者嵌套子a标签里面,为a标签设置绝对定位,右面搜索框为正常块,为右面的搜索框设置margin-left…
在我们这样一个神奇的国度,到了2014年了,居然还是有很多人的电脑上用着XP,安装的是IE6,他们没有想过要升级,我们就得想着兼容他们.... 一. 6爷我喝高了,最后一行有重影.那什么是IE6 的3像素bug? IE7修正了IE6中的一个bug,bug名字就叫做“3像素bug”,即文字溢出bug. 表现形式是ie6浏览器下文字或者图片溢出,莫名其妙的自动复制几个字符.如下图,就自动溢出了一个“下一页”. 二.3像素bug是怎么产生的? 一个容器A包含2两个具有“float”样式的子容器B和C.…
想要创建出漂亮的网页设计,除了要认真学习每一个html和CSS代码之外,不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气,因为你本来写出的规规矩矩的代码,漂亮的设计就此就要完成了,却发现呈现出的效果压根不是你所期望的那样,漂亮的布局被破坏的体无完肤.更可气的是当你查找一遍代码中的错误时,却压根找不出来.这时候你就迫切需要了解一下IE6和它的那些同伙的坏脾气了,因为很可能它们就是罪魁祸首.到底IE6的那几个家伙们到底是如何搞乱你的设计的?咱们双该如何解决呢,别急,请听我慢慢道来:…