寬度設為零,firefox 瀏覽器卻還會顯示出來

在 firefox 或 Chrome 瀏覽器，如果將一個 Button 的 width 設為 0 (ex: width:0px)，在IE 會正常的看不到東西，可是在 firefox 或 Chrome 卻老是多留了一些尾巴出來。這問題主要是因為 border-width 與 width 在 IE 與 firefox 或 Chrome 的解讀不同。一般說來，只要設定 width=0 ，IE 就會看不到任何東西了。但對 firefox 或 Chrome而言，卻有著兩個重要設定影響著畫面呈現：width 與 border-width。

在 firefox 或 Chrome 中，如果你設定 width=0，實際上還是有長度的。因為他預設是有填塞空白的，這裡不能將這填塞空白與 border-width 畫上等號，反到要視為 padding的概念。所以，如果你是希望呈現 width=0 的效果，除了設定width外，還要加上 padding:0 。

另一個容易忽略的地方，則是 border-width。因為 firefox 或 Chrome 對於 border-width 都有預設值，而且是 2 不是 0 ，若是忽略不去設定，則外框還是會跑出來的。

範例：

<input id="btnNone" style="width: 0px; padding:0;border-width:0px" onclick="return

false;" type="submit" value="btnNone" />

參考資料：http://oddlee.blogspot.com/2007/09/cssjavascript-ie-firefox.html

關鍵字：隱藏、hidden、visible