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

Question

在使用 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显示width:56px，height:68px。

如果我用1.7.2alert($("#btn").width())显示32，但是FireBug显示width:50px，height:50px.

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

这是 1.8.0+ 的显示方式：

Answer 1

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

另外，从jQuery1.8开始就有了box sizing的理解

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

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

Changing width of an input element using jQuery 1.7.2 vs 1.8.0+

html

javascript

css

jquery

width