断舍离,永远去做你余生最重要的那件事

首页前端开发正文

border:0和border:none的区别

朱绪2017-05-281503CSS

border:0和border:none的区别主要体现在两个方面:一方面是“性能差异”,另一方面是“兼容差异”。

1、性能差异

我们要搞清楚border:0是什么意思,这实际上表示把border定义成0像素。虽然0px在页面上是看不见的,但浏览器依然会对border进行渲染,渲染后实际上是一个像素为0px的border。

也就是说,border:0是占用内存的。

2、兼容差异

这种兼容差异只存在于IE6和IE7的<input type="button"/>标签以及<button></button>标签中,其他浏览器不存在兼容问题。

border:0在所有的浏览器中效果都是一样的,都是把边框隐藏(不是去掉)。

border:none对IE6和IE7按钮的边框无效,在其他浏览器则可以去掉按钮的边框。

因为IE6和IE7已经逐渐被抛弃了,所以咱也没必要去纠结border:0和border:none的兼容问题了。

在实际的开发中,这两个我们用哪一个都OK,差不大多。

OK

兼容问题就不必去说了,在性能方面,这种差异对页面渲染速度影响不大。