border:none;與border:0;的區別體現有兩點：一是理論上的性能差異二是瀏覽器兼容性的差異。


1.性能差異
【border:0;】把border設為“0”像素雖然在頁面上看不見，但按border默認值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經占用了內存值。
【border:none;】把border設為“none”即沒有，瀏覽器解析“none”時將不作出渲染動作，即不會消耗內存值。

2.兼容性差異
兼容性差異只針對瀏覽器IE6、IE7與標簽button、input而言，在win、win7、vista 的XP主題下均會出現此情況。

【border:none;】當border為“none”時似乎對IE6/7無效邊框依然存在，如下例


【border:0;】當border為“0”時，感覺比“none”更有效，所有瀏覽器都一致把邊框隱藏


總結：
1. 對比border:0;與border:none;之間的區別在于有渲染和沒渲染，感覺他們和display:none;與visibility:hidden;的關系類似，而對于border屬性的渲染性能對比暫時沒找測試的方法，雖然認為他們存在渲染性能上的差異但也只能說是理論上。

2. 如何讓border:none;實現全兼容？只需要在同一選擇符上添加背景屬性即可


對于border:0;與border:none;個人更向于使用,border:none;，因為border:none;畢竟在性能消耗沒有爭議，而且兼容性可用背景屬性解決不足以成為障礙。




前些天，同學在群里問IE6下input的border:none;不管用。然后有以下考證過程：

測試：

border:none;無效

border:none;*border:#ccc;（任意顏色）生效。

測試兼容性，無問題。得出結論border:none;IE6不認識。

我個人的測試：

翻IE6默認CSS，涉及到border的有border-style: inset; border-width: 2px;于是

border:0 none;生效。

只寫border:0;無效。顧得出第一次結論：必須對border的width和style進行全部設置方可消除IE6下的border。

在得知*border:#ccc;也能解決問題的時候，發現我的理論并不正確。馬上進行測試。首先input內有一個和其他行內屬性不同的設置：zoom:1;在給其他行內屬性加上zoom:1;之后進行測試發現border:none;解析正常。此時input在css設置上和其他行內屬性一樣，可能出現問題的地方就只存在在瀏覽器自身了。

瀏覽器渲染一個標簽的樣式，可以簡單看做以下步驟：瀏覽器根據自己的內核解析規則，先解析自身的默認CSS，再解析開發者書寫的CSS，達到渲染標簽的目的。可見影響有3部分，目前基本確定CSS部分沒有問題，剩下的問題就出在瀏覽器內核部分。因此可以得出以下結論：IE6對INPUT的渲染存在bug，border:none;不被解析，當有border-width或border-color設置的時候才會令IE6去解析border-style:none;目前所遇情況都能解釋。

轉載于:https://www.cnblogs.com/bluers/p/3449088.html

總結

以上是生活随笔為你收集整理的input border IE6 bug的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。