一起CSS » IE6

隐藏域在ie中占空间的bug

青色 — Wed, 07 Jul 2010 08:32:39 +0000

input 的 type 设为 hidden 的话，就是隐藏域（废话）。隐藏域在页面中不显示，但可以有值。既然是“隐藏”的，怎么还说会占空间呢。这是 IE 的 bug，不过这个 bug 的出现需要一定的条件，换句话说就是出现的几率比较低，所以可能很多人没有遇到过。那什么样的情况下会出现呢？看下面的代码：




……（省略 8 个或更多）

这样的代码出现的几率是比较小吧，一般情况下，不会有这么多隐藏域，而且表单标签可能会有其他如 p、li 等标签包裹，这样的话，此 bug 又不会出现。我们抛开这些情况，以此 bug 会出现来讨论。上面代码运行后在 IE6 或 IE7 和 FF 中的效果如下图：

在 IE6 或 IE7 中，输入框和提交按钮有很大的间隔，而在 FF 中则效果正常。如果隐藏域越多的话，IE6 或 IE7 中间隔就越大，而 FF 中则始终没有问题。你可以查看Demo

解决此 bug 有以下几个办法：

把所有隐藏域写在同一行里: 优点：不要借助其他标签，不要写样式; 缺点：代码可读性下降
隐藏域浮动: 优点：代码可读性好; 缺点：需要借助 class，如果使用属性选择器的话，IE6 不支持
隐藏域绝对定位: 优点：代码可读性好; 缺点：需要借助 class，如果使用属性选择器的话，IE6 不支持

其实并不只是隐藏域会占空间，把 type 换成其他类型，同样会有这样的问题。比如把 type 换成 button，然后 display:none，效果是一样的。

上面的几种方法虽然可以解决这个问题，但个人认为都不是很完美，如果你有更好的办法，欢迎留言。

IE6支持PNG透明(alpha通道)的4种方法

青色 — Thu, 19 Feb 2009 14:32:24 +0000

想特别说明一下，IE6与生俱来就支持png8的索引色透明度，但不支持png的 alpha 透明度。而我们一直要解决的是让IE6支持PNG的 alpha 透明度。下面我收集整理了4种方法，但都是以滤镜、Js、css 等作为基础模拟还原效果，虽然没有真正的解决alpha透明度问题，但也总算解决了燃眉之急。

IE6支持png8透明:

IE6与生俱来就支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。而对于非动画的GIF建议你使用PNG8，因为体积会更小。测试实例：http://blog.gulu77.com/demo/200809/test_IE6png8/

1、AlphaImageLoader 筛选器

使用简介：在每个标签样式中插入： filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’) 官方原文：http://support.microsoft.com/kb/294714/zh-cn go 测试实例：http://blog.gulu77.com/demo/200809/test_AlphaImageLoader/

2、PNG Transparency in IE

使用简介：相对来说比较简洁，使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度。官方原文：http://codingforums.com/archive/index.php?t-80555.html go 测试实例：http://blog.gulu77.com/demo/200809/test_PNGTransparncyinIE/

3、IE PNG Fix v1.0 / 2.0 Alpha 2

使用简介：页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。官方原文：http://www.twinhelix.com/css/iepngfix/ go 测试实例：http://blog.gulu77.com/demo/200809/test_iepngfix/

4、IE7/IE8 JavaScript library

使用简介：ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库，使微软的IE的行为像一个Web标准兼容的浏览器，支持更多的W3C标准。官方原文：http://code.google.com/p/ie7-js/ go 测试实例：http://blog.gulu77.com/demo/200809/test_ie7-js/ 全部实例打包下载：http://blog.gulu77.com/demo/200809/test_png.rar 以上内容转自：Gulu77 原文地址：http://blog.gulu77.com/?p=147 还发现一个方法：belatedPNG 。具体方法是将下面的代码插到之间：

此方法能同时解决图片和背景问题。所用到的 js 文件您可以到作者的博客上下载，地址是： http://www.dillerdesign.com/experiment/DD_belatedPNG/

别说IE6不认识!important

青色 — Sat, 27 Dec 2008 10:59:55 +0000

别说IE6不认识 !important ,它们只是不够默契。

IE6 对 !important 的支持存在 bug ，有很多人因此作为 IE6 的 hack 。用多了，传多了，很多人就说 IE6 不支持 !important ，给新人带来一些影响。

在《IE6下!important的bug》中已经说了这个问题，现在再举几个例子说明这个问题，以下面的 XHTML 代码为例：

这里是第一行文字

那这里就是第二行文字咯

这里应该是第三行里吧

这里绝对是第四行了

第一个例子的 CSS 代码：

ul{
margin:20px auto;
padding:0;
width:500px;
list-style:none;
line-height:24px;
}
#list li{
color:blue;
}
.first{
color:red !important;
}

点击这里查看效果

在 IE6 里，第一行文字为红色，!important 起作用了。如果 .first 不加 !important ，那么在所有浏览器中第一行都显示蓝色，因为 #list li 的权重比 .fisrt 高。当然 .first 改写成 #list .first 会更好，但为了举例子，所以不这样写。

第二个例子的 CSS 代码：

ul{
margin:20px auto;
padding:0;
width:500px;
list-style:none;
line-height:24px;
}
.first{
color:red !important;
}
.first{
color:blue;
}

点击这里查看效果

同样，!important 在 IE6 里起效果了。

再看第三个例子的 CSS 代码：

ul{
margin:20px auto;
padding:0;
width:500px;
list-style:none;
line-height:24px;
}
.first{
color:red !important;
color:blue;
}

点击这里查看效果

这次 !important 在 IE6 里就不起效果了。

综合上面三个例子得出这么一个结论：在同一个选择器内有重复的属性的话，此选择器内的此属性的 !important 在 IE6 里无效。

所以，并不能说 IE6 不支持 !important ，只是支持的不够好。

纯css下拉菜单详解

青色 — Mon, 10 Nov 2008 07:09:51 +0000

下拉菜单由于实用，所以受到人们的欢迎。下拉菜单通常是由 javascript 来实现的，也应该由 javascript 来实现，因为这属于行为层范围。然而大家知道，使用 CSS 的 :hover 伪类也可以制作下拉菜单，比起 javascript 来，使用 CSS 制作更简单，且更容易理解。但由于 IE6 只有 a 标签支持 :hover 伪类，所以又给这种带来了“阻碍”。不过大家还是比较喜欢纯 CSS 下拉菜单，现在我们就利用 IE条件注释来制作一个纯 CSS 下拉菜单。为了便于理解，选择了很很简单的代码，至于更复杂的，大家可以触类旁通、举一反三。

XHTML 代码：


	一级菜单
	二级菜单
	二级菜单
	二级菜单

CSS 代码：

dd { display:none; }
dl:hover dd { display:block; }

查看Demo

在 IE7 和 FF 等标准浏览器中，下拉菜单可以正常使用，但 IE6 中却没有效果。既然 IE6 只有 a 标签才支持 :hover，那就加上 a 标签。XHTML 代码改写成:



	一级菜单
	二级菜单
	二级菜单
	二级菜单

CSS 代码改写成：

dd { display:none; }
dl:hover dd, a:hover dd { display:block; }

查看Demo

然而在 IE6 中依然没有效果，为什么呢？难道代码有错？其实代码没有错，这是 IE6 的 BUG，关于次 BUG 你可以参看《:hover伪类在IE6中的BUG》。可以加上一些属性来消除此 BUG，这里给 a:hover 加 border:0，即 CSS 代码再次改写成：

dd { display:none; }
dl:hover dd, a:hover dd { display:block; }
a:hover { border:0; }

查看效果

此时在 IE6 中鼠标移动到上面下拉菜单出现了。然而给每个菜单加上连接的时候，IE6 里又不行了，为什么？为什么？不知道。。。不过再给 IE条件注释里的 a 标签里再套上一个表格，即 XHTML 代码改写成如下：



	一级菜单
	二级菜单
	二级菜单
	二级菜单

查看Demo

此时，下拉菜单在 IE6 里没有问题了。

更多例子：

css2高级选择器

青色 — Sat, 01 Nov 2008 12:34:20 +0000

用 css 控制页面，必须用好选择器，否则可能会因为 css 的继承及权重等特性而得不到想要的效果。常用的 css 选择器有：标签选择器、类选择器、ID选择器。我们所见到的选择器几乎都是这三种。然而 css2 还有其他选择器，如：子选择器、相邻选择器、属性选择器，用好这些选择器，能少定义 class 或 id。那么这些 css 高级选择器怎么使用呢？

1、子选择器

子选择器，顾名思义就是选择一个元素的子元素，不包括子元素的子元素。它的符号是大于号“>”。如：

XHTML代码：

链接1链接2

CSS代码：

p>a{
color:#ff0000;
}

你可以点击这里查看效果。

显示效果为“链接1”是红色，而“链接2”则不受影响。如果把“>”换成空格的话，那么css的继承特性会使两个 a 应用样式；如果不用子选择器的话，那就不得不给第一个 a 定义 class 或 id。

2、相邻选择器

相邻选择器就是选择相邻的标签，它的符号是“+”。这里会出现两中情况：

1）如果相邻的两个标签不同，则应用到后一个标签的第一个的标签；

2）如果相邻的两个标签相同，则应用到该标签的除第一个以外的标签（语句有点拗口，看实例能更好的理解）。

以下面的XHTML为例子：

这是标题

这是第一个段落

这是第二个段落

这是第三个段落

针对第一种情况：

h2+p{
color:#ff0000;
}

查看效果。效果是第一个p为红色。

针对第二种情况：

p+p{
color:#ff0000;
}

查看效果。效果是除第一个p外的p为红色。

3、属性选择器

属性选择器是针对HTML标签中的属性进行选择的。例：

XHTML代码：

网站首页

关于本站

友情链接

CSS代码：

a[title]{
text-decoration:none;
}
a[title="home"]{
color:#ff0000;
}

查看效果

a[title] 是选择定义了 title 属性的 a 标签，a[title="home"] 是选择定义了 title="home" 的a标签。另：属性可以不加双引号，也可以是单引号，如 a[title="home"] 也可以写成 a[title=home] 或 a[title='home'] 。

从例子中可以看到这三个选择器确实能减少网页中的class或id，但遗憾的是 IE6 均不支持。万恶的 IE6 。不过 IE6 的使用者正在减少，虽然速度比较慢，但这个趋势是不可避免的。

:hover伪类在IE6中的BUG

青色 — Mon, 20 Oct 2008 07:31:28 +0000

:hover 是我们在 CSS 设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类 :hover，比如我们常见的纯 CSS 菜单、相册效果等等。

或许用了这么久的伪类 :hover，还有部分朋友还不完全了解 :hover 的规则：

在 CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性（特性）的 a 对象，此伪类不发生作用。

在 CSS2 中此伪类可以应用于任何对象。但目前 IE5.5、IE6 仅支持 CSS1 中的 :hover，不过新出的 IE7 是支持 CSS2 中的 :hover。

当我们用伪类 :hover 做某些特殊效果时，依据 CSS2 很好完成，但为了现在占据主流浏览器的 IE6 ，我们又不得不做很多工作，比如给添加 a 元素等来模拟完成最终的效果。

或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择 IE6 为例讲解）。

我们先用 CSS2 的写法来实现：

XHTML 部分：


	鼠标移过来触发我吧！哈哈，终于被你发现了！

CSS 部分：

* { margin:0; padding:0;}
ul { list-style:none; margin:100px;}
li { height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative;}
li a { display:none;}
li:hover a { display:block; text-decoration:none; width:100px; height:100px; background:#c00;
position:absolute; top:50px; left:50px; color:#fff;}

大家可以测试发现在 Firefox 等对 CSS2 支持很好的浏览器中，可以显示我们所要达到的效果，但在 IE6 中却无法实现。

下面让我们换一种思维，所用 CSS1 的写法来看看，这个时候由于无法支持 li 元素 :hover 的使用，我们只好把所有文字包含到 a 中，对 a 使用 :hover ，并且将要显示隐藏的部分放到 span 元素中，首先我们对 XHTML 进行部分调整，调整如下：

XHTML 部分：


	鼠标移过来触发我吧！哈哈，终于被你发现

CSS 中我们将 a 的设置成块级元素，并使 a 的大小和宽度和 li 的相同，并设置 a 为相对位置，用 a 来模拟上例中的 li ；而用 span 来模拟上例中的 a ，设置 span 在默认情况下隐藏（display:none;），当 a 被触发时（:hover），则 span 显示（display:block;）

CSS 部分：

* { margin:0; padding:0;}
ul { list-style:none; margin:100px;}
li { height:100px; width:100px; background:#000; font-size:12px;}
li a { display:block; height:100px; width:100px; position:relative; color:#fff; text-decoration:none;}
li span { display:none;}
li a:hover span { display:block; width:100px; height:100px; background:#c00;
position:absolute; top:50px; left:50px; color:#fff;}

可我们发现上例中的效果，在 IE6 中依然无法显示，难道我们的代码写错了，可检查来检查去一点错误也没有（不信你找个高高手问问，他们依然会回答你，这代码完全正确），难道是标准中的说明是错的？还是 IE6 浏览器连 CSS1 也不支持？很多疑问从四面八方跑来了……

那到底是什么问题呢？

不是标准说明的错，也不是 IE 浏览器不支持 CSS1，而是 IE 浏览器自身解析的问题，是 IE5.5 和 IE6 中伪类 :hover 的 bug。

那又该如何解决这个问题呢？

这个 bug 可以通过在链接的属性中增加某些特殊的 CSS 属性声明来消除。

下面我们对上面的第二个例子进行实验，究竟哪些属性可以帮我们来消除这些 bug。

对 CSS 代码我们增加：

li a:hover {}

对其属性我们仅设定 width:100px; 发现在 IE6 中依旧没有变化，我们尝试着更改 width 的 value ，比如使其 width:99px，奇怪的事情发生了，在 IE6 中，隐藏的部分在触发的时候显示出来了。我们再对 li a:hover 的属性仅设定 color 来测试（初始值为 #fff），更改 color 值，发现在 IE6 下却也不能触发显示，奇怪，奇怪，真奇怪……是不是依旧是一头雾水……没关系，继续往下实验，或许归类了我们就能发现规律了！

我们再用其他属性进行设置：width，positon，background，text-decoration，font-size，font-weight，font-family，border，float，display，font-style，margin，padding，text-align，overflow，text-transform，text-indent，z-index，vertical-align。

我们发现除了 text-decoration，color，z-index 不能触发显示（对于不能触发显示的部分，可以还有某些遗漏的属性，欢迎朋友补充）外，其他属性均可以做为消除伪类 :hover bug 的特定属性。

说明：

对于 dispaly 不可以用本例来测试，可另外写个更简单的例子（去除 ul/li，a 和 span 中的 position ）。在实际应用中怿飞不建议改变 display 值来做为特定属性消除此 bug，而且在某些例子中此属性不一定能消除 bug。
对于做为特定属性的 border 和 background 中的颜色我们还可用全写和简写来改变，如 #fff 和 #ffffff 在消除 bug 中解析为 2 个不同的值。

文章转摘自：PlanABC - 怿飞’s Blog

原文地址：http://www.planabc.net/2007/02/15/ie_hover_bug/

IE6双倍margin bug

青色 — Mon, 15 Sep 2008 07:47:12 +0000

IE6双倍margin bug也就是IE6双倍外边距bug是 IE6 最著名的bug之一。它出现条件是：父元素与子元素之间，子元素同时设置了浮动和外边距属性，子元素会出现此bug，兄弟元素之间则不会。看实际例子能更好的理解：

XHTML代码：

CSS代码：

*{
margin:0;
padding:0;
}
#box{
width:500px;
height:500px;
margin-left:20px;
background:#ff0000;
float:left;
}
#left{
width:200px;
height:400px;
background:#CCCCCC;
float:left;
margin-left:20px;
}
#right{
width:200px;
height:400px;
background:#3366CC;
float:left;
margin-left:20px;
}
#footer{
clear:both;
margin-left:20px;
background:#00FF00;
}

查看效果（用 IE6 查看）

解决的办法是给给子元素加上 display:inline 属性。如上例子给#left加上 display:inline 属性。

查看修正后的效果

如何在IE6里定义高度小于18px的盒子

青色 — Fri, 22 Aug 2008 08:34:47 +0000

你遇到过定义一个较小高度（比如height:5px）的盒子在IE6里却显示不止这个高度的情况吗？

看下面的代码:

HTML代码：

CSS代码：

*{
margin:0;
padding:0;
}
#box{
width:400px;
margin:5px;
overflow:hidden;
}
#left{
width:200px;
float:left;
background:#00f;
}
#right{
width:200px;
float:right;
background:#FF0000;
}

在4个浏览器中的效果图点击这里查看。

我们并没有给盒子定义高度，但IE6和IE7里却出现了高度，FF和opera正常。

给#left盒子加上height:5px后，效果图点击这里查看。

IE6没有变化，IE7#left盒子有了指定的高度，但#right还是有一个高度，FF和opera仍然正常。

再给#right盒子加上height:10px，效果图点击这里查看。

IE6依据没有变化。IE7正常了，FF和opera仍然正常。

IE7、FF和opera正常了，先把他们抛开，不理他们了，现在只看IE6，为什么IE6里的盒子明确定义了高度，它却不按指定的高度显示呢？它为什么始终显示那个高度？那个高度是多少呢？

我们增加#right盒子的高度，增加1px，也就是增加到11px，仍然没有变化，增加到12px、13px……直到增加到19px，终于有变化了，效果图点击这里查看。

由此可以断定那个高度是18px，也就是说在IE6里无法定义小于18px的高度（即使是0）；而IE7没有给盒子定义高度的话，也会有18px的高度。

什么原因呢？这是由于IE默认字体大小造成的。

解决的方法：

一、给盒子定义font-size:0属性；

二、给盒子定义overflow:hidden属性。

这样，在IE6、IE7、FF和opera里的效果就一样了。

让IE6也有最大高度max-height的效果

青色 — Thu, 21 Aug 2008 08:10:47 +0000

上次写了《让IE6也有最小高度min-height的效果》，现在来写《让IE6也有最大高度man-height的效果》。具体代码如下：

height:auto !important; height:500px; max-height:500px; overflow:hidden;

解释：

1、IE6不识别max-height:500px和height:auto !important这两句，超过500px（也就是我们所希望的最大高度）后的内容将自动以藏；

2、IE7及其他标准浏览器全部识别，所以有期望的效果。

但仍然存在一个问题：在没有任何内容的时候，IE6里还是会有500px的高度。因为IE6对!important的解释存在bug（你可以点击这里查看），这时IE6只认height:500px，而不认height:auto !important，所以在IE6里自然就出现500px的高度。

最大高度max-height应用相对较少，因为有可能会出现某些我们没有考虑到的因素而使内容超高了这个最大高度max-height，那么就可能会使页面不美观。自己看这用不用吧！

一起CSS » IE6

隐藏域在ie中占空间的bug

相关日志

IE6支持PNG透明(alpha通道)的4种方法

IE6支持png8透明:

1、AlphaImageLoader 筛选器

2、PNG Transparency in IE

3、IE PNG Fix v1.0 / 2.0 Alpha 2

4、IE7/IE8 JavaScript library

相关日志

别说IE6不认识!important

相关日志

纯css下拉菜单详解

相关日志

css2高级选择器

这是标题

相关日志

:hover伪类在IE6中的BUG

相关日志

IE6双倍margin bug

相关日志

如何在IE6里定义高度小于18px的盒子

相关日志

让IE6也有最大高度max-height的效果

相关日志