2

我有以下 HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <style>
    .box {
        border: solid black 1px;
        padding: 0px;
        margin: 0px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input class="box" style="width:300px;" /><br /><!--CRLF for clarity only-->
        <input class="box" style="width:150px;" /><!--CRLF for clarity only-->
        <input class="box" style="width:150px;" /><!--CRLF for clarity only-->
    </form>
</body>
</html>

渲染时，第二行文本框似乎累计长于第一行上的 1。尽管通过样式属性明确设置了宽度

为什么会发生这种情况，我可以避免吗？

注意：这似乎在 FF3 和 IE7 中的工作方式相同

4

4 回答 4

23

文本框上有一个不包含在宽度中的边框。

于 2009-01-05T16:23:49.130 回答
7

jhunter 是正确的，我要补充一点，您需要 Firebug for FireFox（它是免费的）。安装后，您本可以自己快速解决这个问题。检查您感兴趣的元素并查看“布局”选项卡。

于 2009-01-05T16:36:06.607 回答
4

事实上，你的盒子的宽度都是+2作为左右边框（1px）意味着每个盒子有2个额外的像素。所以总的来说你是+6。

于 2009-01-05T16:29:27.167 回答
3

我建议阅读 CSS Mastery，它解释了不同浏览器框模型的许多差异以及它们如何影响不同浏览器中的布局和宽度。

精通 CSS

于 2009-01-05T16:33:30.373 回答