二月 27th, 2006
再见了Peekaboo/Guillotine 2
Category: CSS, Author: Nicky, Popularity: 8%
IE/Win Guillotine Bug
原文在这里：http://www.positioniseverything.net/explorer/guillotine.html
出现的条件：
1、一个container（容器）
2、一个漂浮在container（容器）里面的元素（无论左右）
3、紧跟后面有一个没有漂浮的内容，里面包含链接
4、链接的a:hover样式有变化时，改变链接颜色除外。
（尤其以background、padding、border、Text Style这些属性效果最为明显。）
5、漂浮的元素比没有漂浮的内容高，不然就不存在切断了。
演示html代码：
<style>
a:hover {background: none #FFFFCC scroll repeat 0% 0%;}
.floated {width: 100px;float: left;}
</style>
<div class="container">
<div class="floated">
<p>The content in the bottom of the float, such as this paragraph, is vulnerable to the Guillotine.The content in the bottom of the float, such as this paragraph, is vulnerable to the Guillotine.The content in the bottom of the float, such as this paragraph, is vulnerable to the Guillotine.</p>
</div>
<ul class="nonfloated">
<li><a href="#">Fix the Guillotine</a></li>
<li><a href="#">Fix the Guillotine</a></li>
<li><a href="#">Chop the float</a></li>
<li><a href="#">Chop the float</a></li>
</ul>
</div>
a:hover {background: none #FFFFCC scroll repeat 0% 0%;}
.floated {width: 100px;float: left;}
</style>
<div class="container">
<div class="floated">
<p>The content in the bottom of the float, such as this paragraph, is vulnerable to the Guillotine.The content in the bottom of the float, such as this paragraph, is vulnerable to the Guillotine.The content in the bottom of the float, such as this paragraph, is vulnerable to the Guillotine.</p>
</div>
<ul class="nonfloated">
<li><a href="#">Fix the Guillotine</a></li>
<li><a href="#">Fix the Guillotine</a></li>
<li><a href="#">Chop the float</a></li>
<li><a href="#">Chop the float</a></li>
</ul>
</div>
<div style="clear: both"></div>
* html .nonfloated {
height: 1%;
}
height: 1%;
}
/* This is the Holly Hack \*/
* html .wrap { height: 1% }
/* For Win IE's eyes only */
* html .wrap { height: 1% }
/* For Win IE's eyes only */
评论数量(0) | Add Comments
本文网址：http://www.osxcn.com/css/peekaboo-guillotine2.html
