Question

我注意到我的一个html表单上的文本输入字段被切断了。我把它的原因缩小到＆lt;！DOCTYPE html＆gt;我们在页面顶部使用的指令。

当我排除＆lt;！DOCTYPE html＆gt;指令，下面的场景中的输入正确呈现，这意味着文本输入字段是完整绘制的。但是当我按原样加载此片段（使用＆lt;！DOCTYPE html＆gt;）时，文本输入的右侧会被截断。

有谁可以向我解释这里发生了什么？我在IE9，Firefox 23和Chrome 29中注意到了这个问题。

以下是片段：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#testDiv span {
    display: block;
    overflow: hidden;
    padding: 0 5px;
}
#testInput {
    width: 100%;
}
#testButton {
    float: right;
}
</style>
</head>
<body>
    <form id="testForm" method="post">
        <div id="testDiv"> 
            <button id="testButton">Apply</button>             
            <span><input type="text" id="testInput" /></span>
        </div>
   </form> 
</body>
</html>

Answer 1

事实证明，答案在于HTML4和HTML5之间的差异，特别是CSS框大小（-moz-box-sizing，-webkit-box-sizing）属性。在HTML4中，box-sizing属性默认为“border-box”。在HTML5中，box-sizing属性默认为“content-box”。

border-box表示边框和填充包含在框的宽度中。 content-box表示边框和填充在框的宽度之上是额外的。因此，如果一个框适合HTML4中的元素，它的右侧边框可以在HTML5中被截断，因为它的宽度不考虑1px边框。

解决方案：添加“box-sizing：border-box;” （以及-moz和-webkit的相关规则）到CSS规则。

Answer 2

我认为doctype是如何解释宽度的：100％，所以没有留给右边界的空间。您可以将其更改为宽度：99.9％，如果这样可以满足您的需求。

doctype html导致表单输入字段被切断

2 个答案: