專案問題1："border:none"與"border:0px"有什麼區別呢？
阿新 • • 發佈：2019-01-11
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審查元素中，會顯示如下：
B.在Firefox，用firebug審查元素中，會顯示如下：
注意：在這裡的border顯示的是“medium”值。
（2）“border:0”——“border-width”的簡寫
A.在Chrome審查元素中，會顯示如下：
B.在Firefox，用firebug審查元素中，會顯示如下：
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”雖說不顯示，但同樣佔記憶體。
（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”雖說不顯示，但同樣佔記憶體。