1

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

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

谁能向我解释这里发生了什么？我在 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>
4

2 回答 2

2

事实证明，答案在于 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 规则。

于 2013-09-16T14:57:56.287 回答
0

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

于 2013-09-12T20:11:27.557 回答