按标签归档 IE6 BUG

【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG（2010年3月30日更新）

由 愚人码头 撰写  |  2010/03/30 18:58 发表在 (x)html+css, 前端名博  |  评论 (23)

在前端开发中，经常会用到css的position:absolute来使层浮动，前通过left,top,right等属性来对层进行定位，但ie6对left,top,right等属性的解释和ie7，ie8及firefox、chrome等不一致。 在父层使用position:relative;和padding（当然0值除外）后，ie6中层的定位起始坐标是从padding后的位置算起，而其他则从层的真实位置算起，而非被padding改变后的那个位置。这点造成使用position:absolute进行层定位时ie6与其他浏览器的表现不一样。 目前解决办法，使用csshack,_left针对ie6进行重设。 另：IE6 BUG大全： http://www.css88.com/archives/579 ===========================以下内容2010年3月30日更新============================= 今天收到robertsky123的留言（见留言区）： 一些样例请测试好再传，会误导读者的，还有ie与其他主流浏览器的盒模式是一样的，不是ie定了width在加padding就不会改变宽度也是改变的， 网上有些东西很容易误导读者，请博主对读者负责啊！ 非常感谢robertsky123的留言和建议！由于robertsky123当头棒喝使我重新对该问题进行了测试。 确实该问题还有其他的解决：不过这些方案很和实际项目有关，比如这个父级容器是否顶宽定高等其他原因。 首先看问题的产生,HTML和CSS如下： <div style="position:relative; padding:20px; border:2px solid #F00;"> <div style="position:absolute; top:0; left:0; border:1px solid #690;">test box</div> </div> 显示如图：

【IE6的疯狂之十三】使用浮动去掉元素中的多余空白间距

由 愚人码头 撰写  |  2009/12/31 16:56 发表在 (x)html+css  |  评论 (5)

IE6的某些元素在表现上有多余的一些空白间隙，或者更形象的说是“外边距（margin）”，要么是margin-top，要么是margin-bottom，当然还有margin-left，margin-right。这个在表单元素中特别常见。即使我们的reset css已经将这些元素的margin值设为0。 可以看一个实例：比如们想模拟一个双边框的文本框，如图： 看html代码：

css的优先级及!important在IE6下的一个BUG[2009年8月1日更新]

由 愚人码头 撰写  |  2009/08/01 02:50 发表在 (x)html+css  |  评论 (7)

一 css的优先级 今天有人跟我说css hack中用!important来区分ie6，因为ie6不支持!important，是的在很早以前我也是用过这种方法写hack，但是后来就基本不用了。本来我对他谁的ie6不支持!important也没什么异议，可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题，而且是支持ie6的，这是为什么呢？到底ie6支不支持!important呢？ 首先我们来看看!important这个属性的作用：!important是用来提升样式优先级的，我们知道样式是有优先级的。 我们先看看css的优先级的几个基本的规则： ID选择器(形如#id{}) > 类选择器(形如.class{}) > 标签选择器(形如body{}或者*｛｝)，也就是ID选择器，类选择器，标签选择器中，ID选择器的优先级最高，标签选择器最低；(转载请注明出处：WEB前端开发 http://www.css88.com/) 选择器越具体优先级就越高，也就是 .classA .classB .classC{font-size: 25px;} .classB .classC{font-size:18px} .classC { font-size: 12px; } 这里.classA .classB .classC的优先级最高，.classC的优先级最低； 在同一个级别的情况下，最后指定的规则优先级就越高，也就是我们通常说的就近原则；html中标签的style的属性都高于css文件中的选择器样式； 标有”!important”的规则有最高优先级。

【IE6的疯狂之九】li在IE中底部空行的BUG

由 愚人码头 撰写  |  2009/04/13 21:30 发表在 (x)html+css  |  评论 (13)

曾经写过【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题），原文地址： http://www.css88.com/archives/421； IE6 BUG大全： http://www.css88.com/archives/579 但是这次li在IE中底部出现的不是3像素而是一整条空白行，如图： HTML代码： <ul>   <li><a href="#">第1条连接</a></li>   <li><a href="#">第2条连接</a></li>   <li><a href="#">第3条连接</a></li> </ul>

【IE6的疯狂之一】IE6中奇数宽高的BUG

由 愚人码头 撰写  |  2009/04/01 03:04 发表在 (x)html+css  |  评论 (5)

IE6真是太疯狂了。今天由于项目需要做了这么一个布局：一个外部的相对定位div，内部一个绝对定位的div（right:0）， 如图： 可是在IE6下查看，却变成了right:1px的效果了： IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。高度也是一样的 查看源码： CSS代码: #out { width: 609px;/*这里宽度为奇数，bug就出现了！！改成偶数就OK了*/ height: 300px; position: relative; background:#FF0000; color:#FFF; } #inn { width: 200px; height: 250px; position: absolute; top: 0px; right: 0px; background:#000000; } XML/HTML代码: <div id=“out”> <div id=“inn”>此处为内部绝对定位的 DIV</div> </div>

【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG

由 愚人码头 撰写  |  2009/03/26 14:23 发表在 (x)html+css  |  评论 (1)

IE6下链接伪类（:hover）CSS背景图片有闪动BUG，主要原因ie会再一次请求这张图片，或者说图片没被缓存。 例如： CSS代码 a:hover{background:url(imagepath)}   常用的解决方案： 在页面底部添加以下IE6专用代码，让IE6缓存CSS背景图片至本地，这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。   XML/HTML代码 <!–[if IE 6]>   <script type=”text/javascript”>   document.execCommand(”BackgroundImageCache”, false, true);    </script>   <![endif]–>       

【IE6的疯狂之七】样式中文注释后引发失效

由 愚人码头 撰写  |  2009/03/26 14:19 发表在 (x)html+css  |  评论 (6)

这是ie6 出现的奇怪现象。这是由于css 和html 的编码不同所引致。 满足下面条件就会引起 注释下面的样式不起作用： 1. css有中文注释 2. css为ANSI编码 3. html为utf-8编码 解决方法： 1. 去掉中文注释，用英文注释 2. 统一css 和 html 的编码 建议采用第二种解决方法 ps： css为uft-8  html 为ANSI 不会出现失效的情况。 参考文章：冯子胡说 的 http://vontall.blogbus.com/logs/4366443.html

【IE6 BUG大全】position:fixed在IE6下的实现

由 愚人码头 撰写  |  2009/03/26 14:07 发表在 (x)html+css, JS与RIA  |  评论 (1)

  Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。   值 描述 static 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。 relative 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20″ 会将元素移至元素正常位置左边 20 个像素的位置。 absolute 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。 fixed 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。   position:static　无定位 该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。 如：#nav{position:static;} 这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。 其他两种前面提过，我们 主要说的是fixed position:fixed　相对于窗口的固定定位 请特别注意，IE6及以下不支持CSS中的position:fixed属性。真的非常遗憾，所以我们只能通过JS模拟和CSS Hack等方法来实现。 1.IE条件注释解决方案： demo： http://www.css88.com/demo/position_fixed/POSITION_fixed2.html

【IE6的疯狂系列】IE6 BUG大全（bug征集、整理中..）

由 愚人码头 撰写  |  2009/03/26 12:51 发表在 (x)html+css  |  评论 (23)

IE6 bug到底令我们前端开发头痛我就不多说了 说实话，很多东西我一直在回避IE6的BUG，比如不用半透明的PNG。。。 但是毕竟IE6还将长期存在，而且IE6在中国比例目前还绝对多数，所以我们无法回避。逃无可逃，退无可退！ 现整理收集《【IE6的疯狂系列】IE6 bug大全》仅供参考。 如果大家发现IE6或者IE7的BUG，并愿意共享，请您留言，来邮件:feiwen8772@qq.com,或者QQ：148246293，本人将尽快总结这里，和大家一起分享。 【IE6的疯狂之一】IE6中奇数宽高的BUG：http://www.css88.com/archives/1725 【IE6的疯狂之二】IE6中PNG Alpha透明：http://www.css88.com/archives/577 【IE6的疯狂之三】IE6 3像素BUG的实例：http://www.css88.com/archives/117 【IE6的疯狂之四】IE6文字溢出BUG：http://www.css88.com/archives/253 【IE6的疯狂之五】div遮盖select的解决方案：http://www.css88.com/archives/545 【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）：http://www.css88.com/archives/421 【IE6的疯狂之七】样式中文注释后引发失效：http://www.css88.com/archives/726 【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG：http://www.css88.com/archives/744 【IE6的疯狂之九】li在IE中底部空行的BUG：http://www.css88.com/archives/1111 【IE6的疯狂之十】父级使用padding后，子元素绝对定位的BUGhttp://www.css88.com/archives/1584 【IE6的疯狂之十一】!important在IE6下的一个BUG：http://www.css88.com/archives/1716 【IE6的疯狂之十二】一个display:none引起的3像素的BUG：http://www.css88.com/archives/1797

【IE6的疯狂之二】IE6中PNG Alpha透明(全集)

由 愚人码头 撰写  |  2009/03/26 12:50 发表在 (x)html+css  |  评论 (6)

ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明。 很多人说IE6不支持PNG透明，其实IE支持100%透明的PNG，疯狂的IE6只是不支持png的Alpha透明。 这个BUG给我们带来了很大的困扰。 但是这仍然存在很多问题，比如半透明的PNG背景图片。 Gulu77整理了4种IE6中PNG Alpha透明的方法： 测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html 这里用IE6测试，插入的图片和背景图片没有透明。   第一种方法：AlphaImageLoader 筛选器 微软给出了一个解决方案：http://support.microsoft.com/kb/294714/zh-cn   使用简介：在每个标签样式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’) 注意事项: AlphaImageLoader难以实现插入图片<img src=”.png”/>透明 AlphaImageLoader方法用于背景图片上,实现background-image的效果 AlphaImageLoader IE8不支持 因为IE7支持AlphaImageLoader,避免冲突建议使用CSS hack区分开,只针对IE6使用 测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html   第二种方法：PNG Transparency in IE 使用简介：相对来说比较简洁，使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度 注意事项: 根目录的spacer.gif透明图片作为png图片的替换,写在JavaScript中的spacer.gif路径根据需要调整 PNGTransparncyinIE方法在背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了 官方原文：http://codingforums.com/archive/index.php?t-80555.html 测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html   第三种方法：IE PNG Fix v1.0 / 2.0 Alpha 3 这是目前最新版本，今天重点介绍的一个方法。 使用简介：页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha [...]