我有一个页面--- ---链接现在删除---
你可以在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;
}
我认为你的意思是,当框中有足够的文本时,不应用右边填充,并且输入更多文本,甚至左边填充也会消失。这可以在以下简单文档中观察到:
<!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
框大多没有样式,并且所有滚动都发生在它内部。