Question

我有以下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中看起来都是一样的

Answer 1

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

Answer 2

jhunter是正确的，我想补充说你需要Firebug for FireFox（它是免费的）。您可以通过已安装的快速自己想出来。检查您感兴趣的元素，然后查看“布局”选项卡。

Answer 3

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

Answer 4

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

CSS Mastery

为什么150 + 150在浏览器中不等于300？

4 个答案: