為什么寬度和高度CSS不會影響此按鈕元素？

Question

如果我有

<button></button>

與

button {width: 1ex; height: 1ex;}

它在Firefox（47.0）中呈現為

 button { width: 1ex; height: 1ex; } 

 <button></button> 

為什么不是方形的？

Answer 1

Firefox對元素應用默認填充，如下面的屏幕截圖所示（左側和右側分別為6px ）

另外，如果您需要一個完美的方形按鈕，則需要設置（或刪除）其邊框，例如

button { 
  width: 1ex;
  height: 1ex;
  padding: 0; 
  border: 1px solid currentColor;
}

（然后您可能應該調整寬度和高度，因為按鈕的尺寸會減小很多）

---

Firefox上的計算盒模型：

Answer 2

您正在使用哪個版本的Firefox？ 我無法復制您的問題，這使我認為這是您的瀏覽器或CSS中的其他內容。 這個片段

 body { background: #000 } button { width: 1ex; height: 1ex; } 

 <button></button> 

在Chrome中對我來說看起來像這樣 ……就像這樣 在Firefox中為我服務（我保證這是兩種不同瀏覽器中的兩種截屏！）。 而且，對我來說，在兩種瀏覽器中，將width和height更改為10ex都會使按鈕變成更大的正方形。