;输入元素宽度渲染问题

发布于 2024-10-31 09:36:34 字数 504 浏览 0 评论 0原文

我在渲染输入文本元素时遇到问题。如果我将添加到我的文件中，输入元素会被拉伸，但我的输入提交按钮不会。我已经在几个不同的浏览器中进行了测试，结果是一致的，所以可能是我:(。

在示例中，我的文本元素以 304 像素的宽度呈现。当我删除第一行时，它将以 300 像素的宽度呈现。

示例：

<!doctype html>
<html>
 <STYLE type="text/css">
    *{ margin: 0px; padding: 0px; }
    input
    {
        width: 300px;
    }
 </STYLE>
<body>
    <input/><br/>
    <input type="submit">
</body>
</html>

有谁知道是什么原因造成的，但更重要的是如何解决它？

原文

I have a problem when rendering my input text elements. If i add the <!doctype html> to my file the input element gets stretched, my input submit button does not.
I have tested in several different browsers and it is consistent, so it is probably me :(.

In the example my text element is rendered with a width of 304 pixels. When I remove the first line it will render at 300 pixels.

example:

<!doctype html>
<html>
 <STYLE type="text/css">
    *{ margin: 0px; padding: 0px; }
    input
    {
        width: 300px;
    }
 </STYLE>
<body>
    <input/><br/>
    <input type="submit">
</body>
</html>

Does anybody know what is causing it, but more importantly how it can be fixed?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半城柳色半声笛 2024-11-07 09:36:34

当您没有该文档类型时，您的页面将以Quirks 模式呈现。

在 Quirks 模式下，input 的 border 和 padding 计入 300px内部 > 宽度。

当您添加文档类型时，您的页面将以标准模式呈现，并且边框和 padding 不再是 300px 的一部分 - 这就是“额外”4px 的来源。

请参阅此处：http://www.quirksmode.org/css/box.html

对于现代浏览器“修复”此问题的最简单方法是使用 box-sizing: border -box：

input
{
    width: 300px;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

或者，您可以自己显式设置padding和border-width，以确保值的总和>padding、border-width 和 width 总计为 300px。

When you don't have that doctype, your page is rendering in Quirks Mode.

In Quirks Mode, the border and padding of the input are counted inside the 300px width.

When you add the doctype, your page is rendering in Standards Mode, and the border and padding are no longer part of the 300px - that's where the "extra" 4px is coming from.

See here: http://www.quirksmode.org/css/box.html

The easiest way to "fix" this for modern browsers is to use box-sizing: border-box:

input
{
    width: 300px;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Or, you can explicitly set the padding and border-width yourself, to make sure the sum of the values of padding, border-width and width add up to 300px.

回复收藏 0 原文

~没有更多了~