注:在最新的deer park也就是Firefox1.1的预览版中这个bug似乎消失了。(2005.06.30)
昨儿遇到一件十分蹊跷的事情,有同事和我说li前的引导图片在Firefox中不能显示,当时我用IE,Mozilla查看都很正常,可是就只有Firefox下显示时丢失图片(有时打开时图片还在,reload一次以后即消失),Firefox与Mozilla都是采用gecko的核心,出现这样的不同的状况的确有些叫我意外。
最后我们发现问题存在与li中间包含的标签上,如果不使用H标签的话这个问题就没有了。
原始代码如下:
<style>li {list-style:url(robodemo.gif)}</style> ….
<li>
<h5>text</h5>
</li>
不过晚上回到家里还是越想越不对劲,而后做了一些尝试发现如下规律:
- 1.这个BUG不仅仅是对H标签,同样是块状标签P也有同样的问题;
- 2.修改块状物体的显示属性改为线性(display:inline)可以避免这个问题;
当然故事还没有完,最后我发现一件让人哭笑不得的事实,如果你“<li><h5>text</h5></li>”这么写代码,也就是说h标签紧跟着li标签不换行,这个问题就彻彻底底的消失了。
Firefox你还真是调皮的厉害。
附带演示代码如下(插入</head>与</body>中):
<style>
li {list-style:url(http://www.mozilla.org/images/livemarks16.png)}
</style>
<body>
<ul>
<li>
<h1>1</h1>
</li>
<li>
<p>2</p>
</li>
<li><h1>3</h1></li>
<li><p>4</p></li>
<li><h1 style="display:inline">5</h1></li>
</ul>