February 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代码：
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>
Bug所在：
当你把鼠标放在第三行的链接上时，漂浮元素下面就被切断了，所以这个BUG叫“断头台”呢。
修复方法：
● 在容器外面增加一个clear: both的层（传统方式）。
如：
● 给没有漂浮的元素定义个百分比高度（推荐）。
如：Holly Hack方法
height: 1%;
}
打开Wordpress后台CSS样式你也会发现这样的语句：
* html .wrap { height: 1% }
/* For Win IE's eyes only */
搞明白了这些bug的原理和hack方法，你就会明白一些国外的CSS里面这样那样的代码。其实Holly Hack什么的就是一个解决bug的方式，在我们制作网站的时候都可能总结出了一些hack方法，只不过没有给它取名字而已。有机会让我也首先发现一个解决bug的方法，我就把它命名为“nicky hack”，呵呵！
想要成为CSS高手记得熟练使用各种Hack技巧，那么首先得熟读“CSS hack浏览器兼容表”，明白哪种浏览器支持什么不支持什么？比如比较常用的hack方法就是使用* html .any{}，从列表上来看这个代码只有IE和苹果上的Safari认识，还有就是在属性前加下划线(比如：_background: #eee;)，也只有它们能认识。这些都是想要成为出色网页设计师的朋友所必须掌握的知识。
全文完，如有什么不对的地方，谢谢大家指出。
评论数量(0) | Add Comments
本文网址：http://www.osxcn.com/css/peekaboo-guillotine2.html
