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

StackOverflow https://stackoverflow.com/questions/413653

  •  03-07-2019
  •  | 
  •  

题

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

有帮助吗？

解决方案

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

其他提示

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

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

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

CSS掌握

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top