与“bug”标签相关日志

IE中z-index BUG
首先先来看一个演示例子的代码部分。
XHTML 部分：
<div id=”container”>
<div id=”box1″>这个box应该在上面</div>
</div>
<div id=”box2″>这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking context ，甚至当元素 z-index的为“auto”。</div>
CSS 部分：
#container {
position: relative;
}
#box1 {
position: absolute;
top: 100px;
left: 210px;
width: 200px;
height: 200px;
background-color: yellow;
z-index: 20;
}
#box2 {
position: absolute;
top: 50px;
left: 160px;
width: 200px;
height: 200px;
background-color: green;
z-index: 10;
}
两个 box 被完全的定位，背景色为黄色的 box1 拥有 z-index 属性值 20，而背景色为绿色的 box2 拥... 0 条评论»

裁切 BUG（Guillotine Bug）现象：浮动元素内某些连接 hover 时，该元素的底部会被砍掉。
详细介绍：http://www.positioniseverything.net/explorer/guillotine.html
触发条件：

一个容器元素；
在容器内有一个没有被清楚浮动的浮动元素；
非浮动的内容在浮动元素之后，并且容器内包含链接；
那些链接的a:hover样式改变某些属性；
只出现在IE浏览器。

: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部分：
<... 6 条评论 »

方法一：改变 html 的排版
例如：
<div>
<img src=”http://www.google.com/intl/en_ALL/images/logo.gif” alt=”google” />
</div>
改为：
<div><img src=”http://www.google.com/intl/en_ALL/images/logo.gif” alt=”google” /></div>
方法二：设置 img 为 display:block
方法三：设置 vertical-align 属性为 top | bottom |middle |text-bottom

下划线“_”在 CSS2.1 规范中是被承认的 CSS 标识。
浏览器会忽略未知的 CSS 属性。
MSIE5+（Windows）会忽略 CSS 属性名前的 “_”。

因此，这个 CSS 的分析是，例如： _color:red。首页， 正确的，对于 CSS2.1 规范来说是被允许的（即使软件验证，只支持 CSS2.0 老版本，说它是一个 Bug ：他们是错误的，但它是正确的）。其次， 被任何浏览器忽略，除了 IE 。最后， 当颜色被处理：在 WinIE 中是红色。
如上，这就是所说的 IE 的 Bug ，特征是以简单明了的方式建立仅对 WinIE 有效的 CSS 属性（MacIE 没有这样的 Bug 和特征）。这样很容易调整，例如被错误执行的位置：在 WinIE 中被调整（见例子）。
#menu {
position: fixed;
_position: absolute;
…
}
同样的方法可以用来调整 min-height 的属性在 WinIE 中消失的现象（见例子）
#b... 0 条评论»