ie6

Page 1 of 1

Archives

文件夹

转载前说明:感谢作者,我终于找到个说法了,之前因为没有相关资料一直是通过改变代码结构来解决该问题的,现在看到这些总结也总算不会无计可施,同样碰到问题的同学有福了。 转载自:http://www.yuzi.me/Share/ie6floatbug.html IE7 的web标准之道IE历来被web标准的拥护者所诟病,而当FireFox横空出世以后,更多的网页制作者开始关注web标准设计。看着FireFox的 市场占有率不停的上升,微软终于推出了IE7。但IE7是否真的能够力挽狂澜,是否真的能够得到用户的信任,是否真的能够得到网页设计者的认可呢? 估 计很多的朋友都是因为这个华丽的“重复文字”一词进来的,其实这纯粹是一个bug作为。这个bug在国际上比较获得认可的名字叫做——“IE6重复文字 bug”。这是一个非常好玩但是有很令人摸不到头脑的bug。如果,你不知道产生原因的话,将会令人非常头痛。这也是我在现实工作中真正遇到过的情况。 测试一下:复制以下代码放IE6下测试 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns=”http://www.w3.org/1999/xhtml“> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <meta name=”author” content=”Yuzi,煜子,网页设计师网站” /> <meta name=”Copyright” content=”Yuzi,煜子” /> <title>IE6重复文字bug</title> </head><body><div style=”width:200px; height:100px; padding-left:70px;”><div style=”float:left;”></div> <!–如果是IE6,你将多看到一个“影”字–> <div style=”float:left; width:200px;”>IE6下DIV容器中双Float元素字符重影</div> </div> </body> 下面是测试页面分别在IE6,IE7,IE8,FireFox(火狐浏览器),Chrome(谷歌浏览器),Oepra以及Safari(苹果浏览器)中显示效果截图 通过截图,你会惊讶的看到在IE6中,多出了一个“影”字。下面来讲讲出现这个“影”字的一些条件(bug重现条件) 一个容器包含2两个具有“float”样式的子容器。 第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小3(说到3,这里稍微多说一句——IE7还修正了IE6中的一个bug,bug名字就叫做“3像素bug”) 在第二个容器前存在注释(这也是为什么此bug也叫做“IE6注释bug”的原因) 为何会出现重影 bug虽然的的确确的存在,但是为什么会出现这样的bug依然没有统一的定论。不同的高手也是各执一词,谁也说服不了谁。真正的原因也许只有当时的IE6团队才能道出来,但是现在仍然没有官方的说法。下面列出来的这两种说法,只是现在网上认可度比较高的而已。 说法一: IE6浏览器对<!– –>注释的解释存在bug引起的。“3像素bug”的扩展后遗症。 […]

自定义的层给select遮挡住是一个老问题了,不过可喜的是ie7和ff都已经支持select的zIndex,只要给层设定高的zIndex就能覆盖select了,可惜对于ie6这个问题还是需要解决。 覆盖select据我所知有两个比较好的方法: 1,显示层时,先隐藏select,关闭层时再重新显示; 2,用一个iframe作为层的底,来遮住select。 方法1应该都明白,方法2就是利用iframe可以覆盖select的特性,只要把一个iframe作为层的底部就可以覆盖下面的select了,程序中是这样使用的:this.Lay.innerHTML = ‘<iframe style=”position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);”></iframe>’可以看出这个透明的iframe也以同样覆盖整个页面,如果是有内容显示的页面最好设置z-index:-1;确保iframe在层的底部。个人觉得使用方法2比较好,但始终是改变了页面结构,有时会比较难控制,至于方法1就比较容易方便。

众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己的博客模板的时候,遇到了这个问题。当时就简单的无视了IE6——尽管有几个使用IE6的朋友,一起BS我……但是对于大项目或商业网站,如果有用到这个属性的时候,是不可能直接无视的。 你是如何让position:fixed在IE6中工作的? 本文所使用的技巧是用了一条Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式,因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval包裹你的语句。 如何解决“振动”的问题? 显然IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。 解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素! 这个方案并不是我提供的。我是在网上的某个地方读到这些的。如果你知道是谁原创了这个方法,请告诉前端观察。 我发现的另外一个小技巧是,你根本无需一个真实的图片!你可以使用一个about:blank替代一个spacer.gif图片,而且它工作的同样出色。 CSS Code123456789101112/*让position:fixed在IE6下可用! */ .fixed-top/* 头部固定 */{position:fixed;bottom:auto;top:0px;} .fixed-bottom/* 底部固定 */{position:fixed;bottom:0px;top:auto;} .fixed-left/* 左侧固定 */{position:fixed;right:auto;left:0px;} .fixed-right/* 右侧固定 */{position:fixed;right:0px;left:auto;}/* 上面的是除了IE6的主流浏览器通用的方法 */ * html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;} * html .fixed-top/* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));} * html .fixed-right/* IE6 右侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));} * html .fixed-bottom/* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));} * html .fixed-left/* IE6 […]

PNG图像格式介绍: PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的“PNG’s Not GIF”,是一种位图文件(bitmap file)存储格式,读成“ping”。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可 存储多到16位的α通道数据。 IE6下PNG背景透明的显示问题 PNG格式比起GIF来表现色彩更丰富,特别是表现渐变以及背景透明的渐变要比GIF格式出色很多,目前,最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明,会显示一个灰色的框。 IE6下PNG背景透明的解决办法 .pngImg { background:url(image.png); _background:url(image.gif);} 注意上文的_号,目前IE7,8以及Firefox浏览器等都不支持此CSS语法,只有IE6识别。因此,其他浏览器会调用PNG,而IE6刚调用GIF。 二.滤镜filter解决IE6下背景灰 background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”a.png” ,sizingMethod=”crop”); 上面的原理是其他调用PNG,IE6,则先设背景没有,然后调用滤镜使之显示PNG图片。 缺陷:IE6下背景无法平铺,这个问题很严重。同时在性能上也有小问题,页面中次数不是很多的时候该办法还是可行的。 AlphaImageLoader滤镜会导致该区域的链接和按钮无效,解决的办法是为链接或按钮添加:position: relative;这样条代码,使其相对浮动。AlphaImageLoader无法设置背景的重复,所以对图片的切图精度会有很高的精确度要求。 解决IE下的链接无效可用最后面的方法: 三.利用JS解决html中的img(插入在网页中的png图像)png背景灰问题 页面中插入一段js即可。原理同上,只是将img标签用<span>标签替换掉,并且通过滤镜设置该<span>标签的background。它会将所有插入的PNG都如此处理。 <!–[if IE 6]> <script> function correctPNG() { for(var i=0; i<document.images.length; i++) { var img = document.images[i]; var imgName = img.src.toUpperCase(); if (imgName.substring(imgName.length-3, […]

之前总能碰到一种问题,就是你定义好了一些东西的背景,但在IE6最后显示的时候背景不是你设置的那个,左看右看也发现不了这个离奇的现象,今天我终于找到了问题所在。 .button{style} .button.active{style} 我们有的时候会定义这样的class来解决 <div class=”button active”></div> 这样的需要。 常用的浏览器都没有什么问题,单单这么写IE6也没事,但是你要这么写了 .button{style} .input{style} .button.active{style:background:url[1]} .input.active{style:background:url[2]} 就来事了,IE6会任性地把.button.active的url[1]替换成url[2]。 然后,我就疯了! .button{style} .input{style} .button .active{style:background:url[1]} .input .active{style:background:url[2]} 这样的写法是不存在问题的。 .button{style} .input{style} .button.active{style:background:url[1]} .input.activea{style:background:url[2]} 这样的写法也是不存在问题的。 然后,然后~我吃药去

绿色版的ie6我本来也没有寄予厚望,只希望能给我方便做css的hack就好了,结果今天我被IE6和IE7合伙给玩了。 竟然有这样的事情,同样的东西,完全就是css,一点附加内容都没有,在我安装的绿色版上不好用,竟然在别人机器上的IE6有效果,我顿时崩溃,想想原因可能是机器默认安装的IE6可能有其他的支持或者有补丁,即便是如此,这我以后做hack烦恼又多了。 IE7的问题就更离谱,我做一个下拉菜单的效果,试过以后本来在IE6,IE7,FF都很好,可是在IE7做其他测试是猛然发现,在IE7刚打开该页面时很正常,只要你在该页面任何地方点击一次鼠标,我的下拉菜单就真的只有下拉,回不去了,百思不得其解,用了各种山寨方法依然没有完美的解决此问题,难道是IE7对鼠标左键有个默认的onclick事件(后经过测试右键问题同样),无奈只能用其他下拉菜单方法代替。 各种科学不能解释的问题,各种纠结~~ 路过的大虾多指点。

对于开始隐藏的层(有display:none;的层)只要加上float:none;就可以解决ie6的占位问题 —————————————————————————————- 制作了一个新页面,尝试完全自己编写tab标签效果。很快就编辑好了,效果非常的赞,在火狐和ie7运行完好,很兴奋,但是,在ie6上我又一次萎靡了~唉~ <div id=”a1″ >图片</div> <div id=”a2″ style=”display:none”>图片</div> <div id=”a”> <div id=”a1″>第一个标签</div> <div id=”a2″>第二个标签</div> </div> 用这样的写法不知道为什么在ie6中总是走形,找了半天原因,主要是display:none隐藏层后,虽然看不到了,但还是占了一定的位置。 这让我很头疼,知道原因了,希望只动小部分代码或者css就改变现状,然布局恢复正常,但是都把自己弄睡着了也没有解决=。= 最后,只能退而求其次,用了个比较猥琐的方法,干脆把标签部分和切换层部分用两个大的层分隔开,居然就好用了~不解。 总之碰到这样的问题,你也找不到方法就先用这个方法将就一下,我现在还在寻找最好的方法,如果你有更好的方法,拜托分享一下,不胜感激:)

做完了一个页面,只对FF和IE7做了兼容,之后在IE6下进行测试,整个内容都缩小了。 经过检查,发现是大多数(强调大多数很重要)的line-height失效,查看一下资料,了解到是因为li中加入图片,会导致line-height失效如 <ul> <li><a href=”#”>1.css</a><img src=”images/icon9.gif” /></li> <li><a href=”#”>2.li</a><img src=”images/icon9.gif” /></li> <li><a href=”#”>3.热门</a><img src=”images/icon9.gif” /></li> <li><a href=”#”>4.模板</a><img src=”images/icon9.gif” /></li> <li><a href=”#”>5.百度</a></li> <li><a href=”#”>6.google</a></li> <li><a href=”#”>7.搜索</a></li> <li><a href=”#”>8.解决办法</a></li> </ul>[来源于http://bbs.blueidea.com/thread-2877695-1-1.html] 解决方法其实很简单,只要不在li中体现出图片的加入就可以,我们可以用很多方法来添加这个图片,虽然都比上述代码麻烦[谁叫ie6流氓呢]。推荐使用把图片单独放在一个li里。 其他方法参考下面: 1.用padding把li撑起来 2.单独把图片写在css中 background 附上其他关于IE6中line-height的失效问题和解决方法: 来源:蹄子流落人间 http://hi.baidu.com/ssl346/blog/item/594eb018bb5069b34aedbcee.html 当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置的line-height数值会失效; 同时以上元素的行高可能×2: 受影响的浏览器: Microsoft Internet Explorer 5.01 / Windows Microsoft Internet Explorer 5.5 / Windows Microsoft Internet Explorer 6&nbsp; […]

当你去设定一个div高度为小于该div字体时,发现height指定的值失效。 不管你怎么调小高度他还是那么宽~FF就不会出现这样的问题~ ie6 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 1px; 来定义了一个 div 的高度,实际在ie6下显示的仍然是一个字体大小高度的层。 解决办法: <div style=”height: 1px; overflow: hidden;”></div> 问题跟进 其实上述的解决办法在设计时看来并不实用,最近看资料又发现既然ie6 会固执的认为这个层的高度不应该小于字体的行高,那么我们可以在标签内部或者css中设置字体大小 font-size:1px; 就可消除默认行高。