为什么宽度和高度CSS不会影响此按钮元素？

Question

如果我有

<button></button>

与

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

它在Firefox（47.0）

中呈现如下

＆＃13;

＆＃13;

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

＆＃13;

<button></button>

＆＃13;

＆＃13;

＆＃13;

为什么它不正方形？

Answer 1

Firefox将默认填充应用于元素，如下面的屏幕截图所示（左侧和右侧6px）

此外，如果你需要一个完美的方形按钮，你需要设置（或移除）它的边框，例如

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

（那么你应该调整宽度和高度，因为按钮大小会减少很多）

Firefox上的计算机模型：

Answer 2

您使用的是哪个版本的Firefox？我无法复制您的问题，这让我认为它是您的浏览器或CSS中的其他内容。这个片段

＆＃13;

＆＃13;

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

＆＃13;

<button></button>

＆＃13;

＆＃13;

＆＃13;

对我来说在Chrome 中看起来像这样......在Firefox中对我来说就像一样（我保证在两种不同的浏览器中这是两个截然不同的屏幕截图！）。而且，对我来说，在两个浏览器中，将宽度和高度更改为10ex确实会使按钮变得更大。