最近遇到的几个 CSS bug

2007.05.0820:59
[ xHTML/CSS ]

都和 layout 有关，记录一下

  1. IE7 下 layout 元素会有鼠标光标问题，具体就是鼠标位于文字之外时，光标也会变成 I 型。演示页面，IE7 下观看，一个框有 layout，一个没有，注意鼠标光标在两个框中的不同形状。

    但是此 bug 有例外：
    当它有背景时（包括背景色和背景图像）、当它 float 时、当它绝对定位时、当它有一个 filter 时，当它被放置于一个 float 的祖先中时，不会出现这个bug，也许还有别的情况，以后发现了再补充。

    另外如果将其相对定位，只有一部分会显示 I 形光标，另外一部分是正常箭头状。箭头状范围不随字体和行距的大小改变，始终在顶部 15px 附近，这个现象有点灵异了 o_o。

    目前比较简单的解决办法是加背景，如果需要背景透明，就用一个透明 gif 代替，或者用一个不存在的 url 代替，或者使用 filter: alpha(opacity=100) 。

  2. 具有 layout 的元素会裁切掉内部元素的默认 margin，但内部元素的自定义 marign 不受影响，演示页面可以参考经典论坛的这个帖子。比较奇怪，默认 margin 和自定 margin 难道还有不同的机制？不知道 IE 对于默认样式是什么处理的，IE6 和 IE7 都受影响。这 bug 由于一般都会写一个 *{margin: 0; padding: 0;} 的样式，所以平时不容易发觉。开始以为和 margin-collapsing 有关，结果似乎不是这个问题，margin-collapsing 和 layout 的相关 bug 可以参考 Bruno 的测试页面。

« CSS 2.2 ？W3C 接受 HTML 5 »

1 Comment Comment RSS »

The URI to TrackBack this entry is: http://old9.blogsome.com/2007/05/08/some-haslayout-related-bugs/trackback/

  1. 不错

    Comment by chxu — 2007.5.23 @ 21:08

Leave a comment

Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>


为防评论机器人，劳驾您输入图片中的字符 :)
captcha