项目问题1:"border:none"与"border:0px"有什么区别呢?

时间:2022-01-10 19:04:38
1、其实,从大体上讲,border:none;与border:0的区别体现有两点:
(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”虽说不显示,但同样占内存。