上礼拜修改了淘宝的全网吊顶,结果上线不到三小时又紧急下线了。原因是设计师发现一个浮出层的边框存在一个像素的白点,而且反复强调“这是完全不能接受的Bug”…
故障原因:
浮出层由上下两个兄弟节点AB构成,当鼠标Hover AB的父节点C时,控制AB的Border出现
C:hover A{
border:1px solid #eaeaea;
border-bottom:white;
}
C:hover B{
border:1px solid #eaeaea;
margin-top:-1px;
}
解决方案:
问题主要出在border-bottom:white; 或者border-bottom:none;也会出现同样的问题,参考了下Facebook的实现方式是——border-bottom:0;
分析缘由:
1 根据w3schools里面的相关说明,Border默认有三个属性border-width/border-style/border-color。
2 我们日常使用的border:0等同于border-width=0,border:none等同于border-style:none,不同浏览器渲染这两种方式是不尽相同的,网上有一篇很详细的文章介绍,在此不再复述。
3 通常认为border:0由于字符少,更有利于流量巨大的网站,比如Facebook的全局吊顶就是采用此类方法。
4 非特殊情况,还是强烈推荐使用border:0 none;彻底让边框消失,世界再次美好起来
参考资料:
http://stackoverflow.com/questions/2922909/should-i-use-border-none-or-border-0
http://bbs.blueidea.com/thread-2970677-1-1.html