• Home
  • About
    • Pretend To Write Like A Hacker photo

      Pretend To Write Like A Hacker

      besteric

    • Learn More
    • Twitter
    • Instagram
    • Github
    • Weibo
  • Posts
    • All Posts
    • All Tags
  • Projects

一个像素引发的血案

Reading time ~1 minute

上礼拜修改了淘宝的全网吊顶,结果上线不到三小时又紧急下线了。原因是设计师发现一个浮出层的边框存在一个像素的白点,而且反复强调“这是完全不能接受的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



Like Tweet +1
打赏

打赏留言

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少
支付宝
微信

打开支付宝扫一扫,即可进行扫码打赏哦