断头台(Guillotine)

Guillotine是一个在IE6下的BUG。表现的形式为:当鼠标放在一些链接上,浮动元素的下部会被裁剪掉。请用IE6查看演示

如何触发

如果让Guillotine“正常工作”,要满足下面几点:

  1. 有一个block级的包含元素(#container),不要触发layout
  2. 在#container里有一个浮动的元素(#floated)。
  3. 在#float的后面有一些a标签,并且在a:hover里面要改变background。

其中第三点改变background很重要,经过测试如果不改变background,则在上面的条件下不会触发这个BUG。

如何修复

修复这个BUG有下面几个方法:

  1. 让#container触发layout。
  2. 在a:hover里面不要改变background。
  3. 在#container的后面添加一个清除浮动的元素。如:
    <div id="container">
    	<div id="floated">
    	...
    	</div>
    	<a href="#">断头台</a><br />
    	...
    </div>
    <div style="clear: both"></div>
    
  4. 在#floated的后面加上清除浮动的元素。(不推荐,会带来新BUG。)

发表评论