输入元素上的 CSS 填充会破坏 ie6 ie7

CSS padding on input element breaks ie6 ie7

提问人:Jeff 提问时间:8/14/2009 最后编辑:hlovdalJeff 更新时间:8/14/2009 访问量:1384

问:

经过一堆谷歌搜索和搜索,我似乎找不到任何关于这方面的信息。

问题:

在 ie6 和 ie7 中,输入到样式输入中的文本显示为“切成两半”,一些文本在中间被剪掉,其余文本隐藏在输入底部下方。

想象一下输入中的单词。您只能看到单词的上半部分,而下半部分则被输入的下半部分隐藏。FOOBAR

输入元素:

<input name="email" size="40" type="text" id="email" class="input" />

造型:

input, select, textarea {
    font: 13px Verdana, Geneva, sans-serif;
}

input.input, textarea.textarea {
    padding: 10px;
}

当我在 0-2px 之间调整填充时,一切都很好。增加填充会将文本进一步向南推。

所有其他主流浏览器都运行良好,只有 ie6 和 ie7 让我头疼。

没有其他风格在起作用。

CSS 6 互联网 浏览器-7

评论


答:

4赞 mercator 8/14/2009 #1

这只会发生在 Quirks 模式下,因此请修复您的文档类型。

看起来 IE 无法在 Quirks 模式下更改输入的高度,导致填充由于顶部填充而将文本移出视图。

评论

0赞 Jeff 8/14/2009
好吧,我的头文件中有一堆“测试 PHP”代码,这些代码在我的文档类型设置之前生成了一些 <ol>。你认为这就是问题所在吗?
0赞 Jeff 8/14/2009
这成功了!我想我从来不知道怪癖模式。哈哈,非常感谢。
0赞 mercator 8/14/2009
最好确保你的文档类型始终排在第一位,甚至在任何调试输出之前,否则当你上线时,你可能会得到一些令人讨厌的惊喜,浏览器突然以标准模式而不是怪癖模式呈现你的页面。
0赞 Jeff 8/14/2009
做 Web 开发已经有一段时间了,但我今天学到了一些新东西。再次感谢!