
这问题在网络相信已经有不少人问到,最近再次被牵起讨论,籍此记录一下个人的理解,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:
【border:0;】当border为“0”时,感觉比“none”更有效,所有浏览器都一致把边框隐藏,如下例Demo2:
总结:
1. 对比border:0;与border:none;之间的区别在于有渲染和没渲染,感觉他们和display:none;与visibility:hidden;的关系类似,而对于border属性的渲染性能对比暂时没找测试的方法,虽然认为他们存在渲染性能上的差异但也只能说是理论上。
2. 如何让border:none;实现全兼容?只需要在同一选择符上添加背景属性即可,如下例Demo3:
对于border:0;与border:none;个人更向于使用,border:none;,因为border:none;毕竟在性能消耗没有争议,而且兼容性可用背景属性解决不足以成为障碍。
查看:3,066 | 发表留言>>
小路
Nov.25.2009
Scarecrow
Nov.25.2009
标题都错了。。。
enoy
Nov.25.2009
border:0;应该是指border-width:0,border:none;应该指border-style:none吧。
原来还有渲染和没渲染的区别,学习了,下次就用none了。
fireyy
Nov.25.2009
页面设了“宋体”,在safari下看怪怪的
benhuoer
Nov.25.2009
关于性能那一点,当初我面试完了就想说……
border: none 和border: 0一般都用于覆写已经存在边框的情况,用border:none覆写过后节约出来的这点内存会不会被释放,尚无确切的实验明证…… 所谓“没有争议”的性能消耗也不过是一个“理论上”的推论。要解决这个问题,还得深究到浏览器的底层代码中去…… 但是又有那个必要么?从来没听说过有谁用border:0造成内存占用过高的……随便优化一个JavaScript算法就能节省下这点性能需求了。
而border:0;比border: none;少出的三个字符,在大的项目中可能出现多次,也会被下载很多次,积少成多,这就是流量啊……
Shake
Nov.26.2009
此文有点凑字了~~
edielei
Nov.26.2009
谢谢腾讯Webteam,让我又学习了!
设计未来
Nov.26.2009
小小地方,大有学问。学习了~
涉水轻舟
Nov.27.2009
不知道你为什么不直接写作为: border:0 none; 兼容IE、FF、Safari, 而莫名的通过添加background来实现所有兼容。难道background不需要加载渲染,不需要消耗内存?
Ellis
Nov.27.2009
border:0支持者路过
liupeng
Nov.28.2009
理论上0是要消耗内存,个人也比较喜欢用none,这个有数据证明吗?
unicac
Nov.29.2009
各有各的说法。。。。最后还是默认的最漂亮!
Kimcool
Nov.30.2009
用Chrome打开后。完全没有区别。。传说中的没有验证浏览器。
77
Dec.1.2009
@涉水轻舟 ^_^问题很赞!文章针对border的0与none及IE6、IE7与标签button、input而言,对按钮的使用常见的有1.使用默认按钮 2.美化按钮为其添加背景图片 3.使用边框及背景色作修饰 4.既去掉背景图片又去掉边框,除使用默认样式外,其余都需要背景我想对background渲染消耗是必然的,剩下的就是0与none的选择了
77
Dec.1.2009
@liupeng — 理论上的推测,对于消耗尚无确切的测试数据
77
Dec.1.2009
@benhuoer — 感谢参与讨论,对于按钮边框我想默认就已经存在了可以为默认按钮写边框颜色试试,对于性能优化不该都依赖于JS有任何有优化空间都值得去做更何况举手之劳的改一个值。
hong
Dec.2.2009
用none, CSS也是有语义的!
pyzy
Dec.2.2009
俺习惯 border:0px; 嘿~
paper
Dec.3.2009
border:0 none; 的支持路过~~
Azhun.cn
Dec.12.2009
border:0 none;
这招似乎不错,发现大家都很有钻劲
pengkai
Dec.15.2009
http://archivist.incutio.com/viewlist/css-discuss/6297
pengkai
Dec.15.2009
W3 的解释:
none – No border. Color and width are ignored (i.e., the border has width 0).
jinxiu
Dec.15.2009
学到,感谢~~之前去应聘拍拍过~
zlzlcl
Dec.15.2009
10月份腾讯校招面试的时候那个GG就是问的我这个问题 ,当时只回答了 兼容性差异~~ ,惭愧
宇义
Dec.15.2009
用border:0的理由是:当希望通过js获得元素的边框宽度时,border:none不会影响ele.style.borderXXXWidth的取值,而border:0则可以。
hong
Dec.17.2009
CSS也需要语义
Jop
Dec.18.2009
细节上的问题其实是最重要的,尤其是对于大的网站
ropean
Dec.19.2009
不错,学习了。
wander
Dec.27.2009
浏览器 firefox 3.5
测试页5000个input,所占内存 4000k
渲染时border:none与border:0所占内存均为5500k左右
感觉区别并不大
ps:没用专门内存监测工具,数据可能不准确
威化饼
Jan.20.2010
我认为“benhuoer”说的有一定道理!
—————–
border: none 和border: 0一般都用于覆写已经存在边框的情况,用border:none覆写过后节约出来的这点内存会不会被释放,尚无确切的实验明证…… 所谓“没有争议”的性能消耗也不过是一个“理论上”的推论。要解决这个问题,还得深究到浏览器的底层代码中去…… 但是又有那个必要么?从来没听说过有谁用border:0造成内存占用过高的……随便优化一个JavaScript算法就能节省下这点性能需求了。
而border:0;比border: none;少出的三个字符,在大的项目中可能出现多次,也会被下载很多次,积少成多,这就是流量啊……