按钮宽度和高度不正确

Question

Take a look a this。我正在使用jquery的方法访问按钮的高度和宽度，并通过访问.css("height")，我得到两个错误的答案。

我的浏览器缩放率为100％。这是怎么回事？

Inner Height: 46, Inner Width: 196
Height: 46, Width: 196
CSS Height:44px, CSS Width: 184px
(The actual button dimensions are 200 X 50)

Answer 1

您忽略了这样一个事实：默认情况下，CSS渲染的装箱策略会从宽度高度中排除边框。你有border-top = 1，border-bottom = 3和border-right = border-left - 7，它们可以解释缺少的维度。

要获取元素宽度/高度的计算金额，包括它的边框+填充，您可以使用outerWidth() / outerHeight()

另外，在我的情况下，我正确地得到了所有的值：

  

内高：46，内宽：186

     

高度：46，宽度：186

     

CSS高度：46px，CSS宽度：186px

     

（实际按钮尺寸为200 X 50）

Answer 2

在Chrome中检查它，我也看到了：

border: 2px outset buttonface;

因此，每侧添加2px，或总尺寸增加4px，以便计算按钮本身的大小是正确的。

Answer 3

按钮的高度和宽度为184 x 44，有1 x 6填充和2px边框。它完全变成了200 x 50：

看起来按钮宽度是您设置的宽度 - 填充 - 边框。因此，在jQuery中，您需要获取边框和填充尺寸并对其进行计数。

你用jQuery得到的innerWidth是按钮+填充的宽度，但不是边框。因此184 x 44 + 6 x 1变为196 x 46

Answer 4

所有回答者在技术上都是正确的，但他们忽略了这一部分：jquery的outerWidth()和outerHeight()考虑了所有这些（我不知道这些功能）。

Demo