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

【问题标题】：doctype html causing form input field to be cut offdoctype html导致表单输入字段被切断
【发布时间】：2013-09-12 19:21:06
【问题描述】：

我注意到我的一个 html 表单存在问题，其中文本输入字段被截断。我将其原因缩小到我们在页面顶部使用的指令。

当我排除指令时，以下场景中的输入正确呈现，这意味着文本输入字段被完整绘制。但是当我按原样加载这个 sn-p 时（使用），文本输入的右侧被截断。

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

这是sn-p：

<!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>

【问题讨论】：

box-sizing + quirkMode ?
仔细查看文本输入字段的右侧。当 doctype 标签存在时，它看起来不同（右边框被切断），当它被删除时。差异很微妙 - 您可能需要将两者并排比较。

标签： html css doctype

【解决方案1】：

事实证明，答案在于 HTML4 和 HTML5 之间的差异，特别是 CSS box-sizing (-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 规则。

【讨论】：

【解决方案2】：

我认为这是 doctype 解释宽度：100% 的方式，所以右边框没有空间了。如果可以满足您的需要，您可以将其更改为宽度：99.9%。

【讨论】：