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

分手后的思念是犯贱 2022-06-16 23:37 129阅读 0赞

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”虽说不显示，但同样占内存。