(1)理论上的性能差异
(2)浏览器兼容性的差异
性能差异——
a、“border:0px”中,把border设为“0”,虽然页面上看不见,但是如果按照border默认值来理解,浏览器依然对border-width/border-color进行了渲染,即已占用了内存值。
b、“border:none”中,当浏览器解析“border:none”时,将不会对border属性值进行渲染,相对应的即也不会消耗内存值。
兼容性差异——
特别的,是针对于IE6/IE7与标签button、input而言
a、“border:0px”中,似乎比“border:none”更有效,所有浏览器都一致把边框隐藏。
b、“border:none”中,似乎对IE6/IE7无效边框依然存在
综合而言,“border:none”与“border:0px”之间的区别在于“有渲染和没渲染”,类似于“display:none”与“visibility:hidden”类似。
解析——如何让“border:none”实现全兼容?不受IE6/IE7的控制
只需要给元素加上“background”属性即可。
2、从大体上看,两者除了在渲染性能上面的差别外,在标准浏览器上页面的表现是没有任何差别的;
从本质上来讲,
(1)“border:none”——“border-style”的简写
A.在Chrome审查元素中,会显示如下:
element.style { border: none; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; }
B.在Firefox,用firebug审查元素中,会显示如下:
element.style { border: medium none; }
注意:在这里的border显示的是“medium”值。
(2)“border:0”——“border-width”的简写
A.在Chrome审查元素中,会显示如下:
element.style { border: 0; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; }
B.在Firefox,用firebug审查元素中,会显示如下:
element.style { border: 0 none; }
3、在非标准浏览器和标准浏览器情况比较
(1)在firebug中两者的区别——
在IE6/IE7浏览器下:“border:0”被解析为“border-width:0”;
“border:none”被解析为“border-style”。
(2)在标准浏览器中两者区别——
在标准浏览器中,“border:0”比“border:none”多渲染了一个“border-width:0”,这也正是为什么“border:none”的性能要比“border:0”高?
A.“border:none”被理解为关闭此标签;
B.“border:0”虽说不显示,但同样占内存。