最近遇到的几个 CSS bug
2007.05.0820:59
[ xHTML/CSS ]
都和 layout 有关，记录一下
-
IE7 下 layout 元素会有鼠标光标问题，具体就是鼠标位于文字之外时，光标也会变成 I 型。演示页面，IE7 下观看，一个框有 layout，一个没有，注意鼠标光标在两个框中的不同形状。
但是此 bug 有例外：
当它有背景时（包括背景色和背景图像）、当它 float 时、当它绝对定位时、当它有一个 filter 时，当它被放置于一个 float 的祖先中时，不会出现这个bug，也许还有别的情况，以后发现了再补充。另外如果将其相对定位，只有一部分会显示 I 形光标，另外一部分是正常箭头状。箭头状范围不随字体和行距的大小改变，始终在顶部 15px 附近，这个现象有点灵异了 o_o。
目前比较简单的解决办法是加背景，如果需要背景透明，就用一个透明 gif 代替，或者用一个不存在的 url 代替，或者使用
filter: alpha(opacity=100)。 -
具有 layout 的元素会裁切掉内部元素的默认 margin，但内部元素的自定义 marign 不受影响，演示页面可以参考经典论坛的这个帖子。比较奇怪，默认 margin 和自定 margin 难道还有不同的机制？不知道 IE 对于默认样式是什么处理的，IE6 和 IE7 都受影响。这 bug 由于一般都会写一个
*{margin: 0; padding: 0;}的样式，所以平时不容易发觉。开始以为和 margin-collapsing 有关，结果似乎不是这个问题，margin-collapsing 和 layout 的相关 bug 可以参考 Bruno 的测试页面。
不错
Comment by chxu — 2007.5.23 @ 21:08