使用 jQuery 1.7.2 与 1.8.0+ 更改输入元素的宽度答案

【问题标题】：Changing width of an input element using jQuery 1.7.2 vs 1.8.0+使用 jQuery 1.7.2 与 1.8.0+ 更改输入元素的宽度
【发布时间】：2015-04-22 21:07:04
【问题描述】：

在使用 jQuery 1.7.2 与 jQuery 1.8.0+ 时尝试更改 HTML 输入元素的宽度时存在大小差异。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Width</title>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<div id="container">
    <div id="letter-container">
        <input type="button" value="+" class="add" id="btn"/>
    </div>
    <input type="button" id="change" value="Change"/>
</div>
<script type="text/javascript">
    $("#change").click(function()
    {
        var width = 50;
        $('#letter-container input').width(width).height(width);//.css('line-height', (width) + 'px');
        alert($("#btn").width());
    });    
</script>
</body>
</html>

如果我使用 1.8.0+，alert($("#btn").width()) 显示 50，但 FireBug 显示宽度：56 像素，高度：68 像素。

如果我使用 1.7.2 alert($("#btn").width()) 显示 32，但 FireBug 显示宽度：50px，高度：50px。

为什么会有这样的差异？我想使用最新版本的 jQuery 并想要 1.7.2 的功能。它看起来是正确的。

这是 1.8.0+ 的显示方式：

【问题讨论】：

jQuery 的最新版本是 1.11.2（包括对旧版 IE 的支持）以及 2.1.3（删除对旧版 IE 的支持）
@Travis ：我正在尝试将使用 1.7.2 的网页更新为 2.1.3，但不能仅仅因为宽度正在变化。

标签： javascript jquery html css width

【解决方案1】：

这可能是因为它不包括填充/边框。查看outer width，其中包括填充和边框。

另外，从jQuery 1.8开始就对box sizing有了理解。

请看这里： http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/

【讨论】：