border:none;与border:0;的区别

时间:2009-11-25   分类:网页重构   作者:77

 

border:none;与border:0;的区别

这问题在网络相信已经有不少人问到,最近再次被牵起讨论,籍此记录一下个人的理解,border:none;与border:0;的区别体现有两点:一是理论上的性能差异二是浏览器兼容性的差异。

1.性能差异
【border:0;】把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
【border:none;】把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。

2.兼容性差异
兼容性差异只针对浏览器IE6、IE7与标签button、input而言,在win、win7、vista 的XP主题下均会出现此情况。

【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在,如下例Demo1
Demo1

【border:0;】当border为“0”时,感觉比“none”更有效,所有浏览器都一致把边框隐藏,如下例Demo2
Demo2

总结:
1. 对比border:0;与border:none;之间的区别在于有渲染和没渲染,感觉他们和display:none;与visibility:hidden;的关系类似,而对于border属性的渲染性能对比暂时没找测试的方法,虽然认为他们存在渲染性能上的差异但也只能说是理论上。

2. 如何让border:none;实现全兼容?只需要在同一选择符上添加背景属性即可,如下例Demo3
demo3

对于border:0;与border:none;个人更向于使用,border:none;,因为border:none;毕竟在性能消耗没有争议,而且兼容性可用背景属性解决不足以成为障碍。

查看:3,066  |  发表留言>>

查看留言

  1. 小路

    Nov.25.2009

    8) :oops: :mrgreen: 继续学习中,腾讯的技术就是实用,说不定哪天我也能进腾讯哈哈,期待中,更努力中 :oops:

  2. Scarecrow

    Nov.25.2009

    标题都错了。。。

  3. Nov.25.2009

    border:0;应该是指border-width:0,border:none;应该指border-style:none吧。
    原来还有渲染和没渲染的区别,学习了,下次就用none了。

  4. Nov.25.2009

    页面设了“宋体”,在safari下看怪怪的

  5. Nov.25.2009

    关于性能那一点,当初我面试完了就想说……

    border: none 和border: 0一般都用于覆写已经存在边框的情况,用border:none覆写过后节约出来的这点内存会不会被释放,尚无确切的实验明证…… 所谓“没有争议”的性能消耗也不过是一个“理论上”的推论。要解决这个问题,还得深究到浏览器的底层代码中去…… 但是又有那个必要么?从来没听说过有谁用border:0造成内存占用过高的……随便优化一个JavaScript算法就能节省下这点性能需求了。

    而border:0;比border: none;少出的三个字符,在大的项目中可能出现多次,也会被下载很多次,积少成多,这就是流量啊……

  6. Shake

    Nov.26.2009

    此文有点凑字了~~

  7. Nov.26.2009

    谢谢腾讯Webteam,让我又学习了!

  8. Nov.26.2009

    小小地方,大有学问。学习了~ :mrgreen:

  9. Nov.27.2009

    不知道你为什么不直接写作为: border:0 none; 兼容IE、FF、Safari, 而莫名的通过添加background来实现所有兼容。难道background不需要加载渲染,不需要消耗内存?

  10. Ellis

    Nov.27.2009

    border:0支持者路过

  11. Nov.28.2009

    理论上0是要消耗内存,个人也比较喜欢用none,这个有数据证明吗?

  12. Nov.29.2009

    各有各的说法。。。。最后还是默认的最漂亮!

  13. Nov.30.2009

    用Chrome打开后。完全没有区别。。传说中的没有验证浏览器。

  14. 77

    Dec.1.2009

    @涉水轻舟 ^_^问题很赞!文章针对border的0与none及IE6、IE7与标签button、input而言,对按钮的使用常见的有1.使用默认按钮 2.美化按钮为其添加背景图片 3.使用边框及背景色作修饰 4.既去掉背景图片又去掉边框,除使用默认样式外,其余都需要背景我想对background渲染消耗是必然的,剩下的就是0与none的选择了

  15. 77

    Dec.1.2009

    @liupeng — 理论上的推测,对于消耗尚无确切的测试数据

  16. 77

    Dec.1.2009

    @benhuoer — 感谢参与讨论,对于按钮边框我想默认就已经存在了可以为默认按钮写边框颜色试试,对于性能优化不该都依赖于JS有任何有优化空间都值得去做更何况举手之劳的改一个值。

  17. Dec.2.2009

    用none, CSS也是有语义的!

  18. Dec.2.2009

    俺习惯 border:0px; 嘿~

  19. Dec.3.2009

    border:0 none; 的支持路过~~

  20. Dec.12.2009

    border:0 none;
    这招似乎不错,发现大家都很有钻劲

  21. Dec.15.2009

    W3 的解释:
    none – No border. Color and width are ignored (i.e., the border has width 0).

  22. Dec.15.2009

    学到,感谢~~之前去应聘拍拍过~

  23. Dec.15.2009

    10月份腾讯校招面试的时候那个GG就是问的我这个问题 ,当时只回答了 兼容性差异~~ ,惭愧

  24. 宇义

    Dec.15.2009

    用border:0的理由是:当希望通过js获得元素的边框宽度时,border:none不会影响ele.style.borderXXXWidth的取值,而border:0则可以。

  25. Dec.17.2009

    CSS也需要语义

  26. Jop

    Dec.18.2009

    细节上的问题其实是最重要的,尤其是对于大的网站

  27. Dec.19.2009

    不错,学习了。

  28. Dec.27.2009

    浏览器 firefox 3.5
    测试页5000个input,所占内存 4000k
    渲染时border:none与border:0所占内存均为5500k左右
    感觉区别并不大
    ps:没用专门内存监测工具,数据可能不准确

  29. Jan.20.2010

    我认为“benhuoer”说的有一定道理!

    —————–
    border: none 和border: 0一般都用于覆写已经存在边框的情况,用border:none覆写过后节约出来的这点内存会不会被释放,尚无确切的实验明证…… 所谓“没有争议”的性能消耗也不过是一个“理论上”的推论。要解决这个问题,还得深究到浏览器的底层代码中去…… 但是又有那个必要么?从来没听说过有谁用border:0造成内存占用过高的……随便优化一个JavaScript算法就能节省下这点性能需求了。

    而border:0;比border: none;少出的三个字符,在大的项目中可能出现多次,也会被下载很多次,积少成多,这就是流量啊……

发表留言:

发表留言

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: