为什么宽度和高度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都会使按钮变成更大的正方形。