border:none;与border:0;的区别
这问题在网络相信已经有不少人问到,最近再次被牵起讨论,籍此记录一下个人的理解,border:none;与border:0;的区别体现有两点:一是理论上的性能差异二是浏览器兼容性的差异。
性能差异【border:0;】把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
【border:none;】把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。
兼容性差异兼容性差异只针对浏览器IE6、IE7与标签button、input而言,在win、win7、vista 的XP主题下均会出现此情况。
【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在,如下例Demo1:
【border:0;】当border为“0”时,感觉比“none”更有效,所有浏览器都一致把边框隐藏,如下例Demo2:
总结:
对比border:0;与border:none;之间的区别在于有渲染和没渲染,感觉他们和display:none;与visibility:hidden;的关系类似,而对于border属性的渲染性能对比暂时没找测试的方法,虽然认为他们存在渲染性能上的差异但也只能说是理论上。
如何让border:none;实现全兼容?只需要在同一选择符上添加背景属性即可,如下例Demo3:
对于border:0;与border:none;个人更向于使用,border:none;,因为border:none;毕竟在性能消耗没有争议,而且兼容性可用背景属性解决不足以成为障碍。
建议继续学习:
- 使用CSS3开启GPU硬件加速提升网站动画渲染性能 (阅读:5246)
- 从用户体验出发的性能指标分析-Start Render (阅读:3207)
- JavaScript定时机制、以及浏览器渲染机制 浅谈 (阅读:2934)
- CSS的渲染效率 (阅读:2365)
- borderl:none;与border:0;的区别 (阅读:2043)
- 10条影响CSS渲染速度的写法与建议 (阅读:1974)
- 重温CSS:Border属性 (阅读:1915)
- CSS Border使用小分享 (阅读:1587)
- 前后端分离的思考与实践(二) (阅读:1576)
- 记一次淘宝首页奇葩的渲染问题 (阅读:1488)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:Gulu77 来源: Gulu77
- 标签: border 渲染
- 发布时间:2009-11-22 20:45:13
- [16] 浏览器的工作原理:新式网络浏览器幕后揭秘
- [15] Go Reflect 性能
- [13] iOS下自己动手造无限循环图片轮播
- [13] iOS可视化编程 Tips 之“无需代码设置
- [13] Spark性能优化——和shuffle搏斗
- [13] 界面设计速成
- [12] iOS并发编程(Concurrency Pr
- [12] 最萌域名.cat背后的故事:加泰与西班牙政府
- [12] iTerm2 (Mac Terminal)
- [11] 基于HTTP缓存轻松实现客户端应用的离线支持