IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

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

ISD Webteam 2009-11-25 23:49:00 累计浏览 3,162 次
本机暂存

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

    这问题在网络相信已经有不少人问到,最近再次被牵起讨论,籍此记录一下个人的理解,borderl: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

    Demo1

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

    Demo2

    总结:

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

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

    demo3

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

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  2. 记录一个软中断问题 (累计阅读 16,957)
  3. Go Reflect 性能 (累计阅读 14,157)
  4. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)
  5. 各公司对前端开发的职位描述 (累计阅读 10,405)
  6. iframe大小自适应 (累计阅读 10,057)
  7. 浏览器的渲染原理简介 (累计阅读 8,377)
  8. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,357)
  9. 程序员眼里IE浏览器是什么样的 (累计阅读 8,011)
  10. 2010网页设计趋势 (累计阅读 7,818)