Question

我有一个页面--- ---链接现在已删除---

你可以在FF和IE（我有IE 9）中检查它。在其中，您可以看到右上方的搜索框有一个填充（左侧：32px，右侧：72px）。填充在FF和Chrome中正常工作，但在IE中不能正常工作。

可能的原因是什么。

搜索框代码 -

<form action="">
    <input type="text" name="search" id="search" />
    <input type="submit" id="button" value="" />
    </form>

CSS：

#search {
    background:url(images/searchlens.jpg) no-repeat 0 0;
    float:right;
    width: 286px;
    height:40px;
    border:none;
    padding-left: 32px;
    padding-right:72px; 
}

Answer 1

我认为你的意思是，如果框中有足够的文字，则不应用右边填充，并且输入的文字越多，即使左边填充也会消失。这可以在以下简单文档中看到：

<!doctype html>
<title>input padding</title>
<style>
#search {
    padding-left: 32px;
    padding-right: 72px;
    width: 286px;
}
</style>
<input id=search value=
"Hello cruel world of Internet Explorer, why don't I get padded as specified?">

如果在框中输入了更多字符，即使左边填充也会消失。

这种古怪似乎没有任何好的解决办法。在对问题padding a text input in IE… possible?的回答中，已经提出了一些修正，在某些情况下它们可能有所帮助，但不是我的测试。

所以我建议通过将input元素包含在div元素中并在div元素上设置背景和填充来避免问题，以便input里面的盒子大多没有样式，所有的滚动都在里面进行。

文本框内的填充在Internet Explorer中无法正确显示

1 个答案: