在IE中填充文本输入...可能吗？ [英] padding a text input in IE... possible?
问题描述
我有一个文本输入和一个绝对定位在它上面的搜索...为按钮腾出空间我使用了一些填充来保持文本不会进入按钮，这很好，它可以在Firefox中使用，但不能IE。
实际上......在IE中，文本输入似乎没有填充效果。
< style type =text / css>
#mainPageSearch input {
width：162px;
padding：2px 20px 2px 2px;
保证金：0;
font-size：12px;
-moz-border-radius：5px;
-webkit-border-radius：5px;
背景：＃F3F3F3 url（form-shadow.png）repeat-x滚动左上方;
border-color：＃C6C6C6＃C6C6C6＃E3E3E3;
border-style：solid;
border-width：1px;
颜色：＃666666;
}
#mainPageSearch {
margin-bottom：10px;
职位：亲属; / *让我绝对定位按钮* /
}
#mainPageSearchButton {
display：block;
位置：绝对;
top：0px;
right：-2px;
text-indent：-2000em;
height：22px;
width：22px;
背景：透明网址（'images / searchBtn.png'）top center no-repeat;
}
< / style>
< form id =mainPageSearchaction =>
< input type =text/>
< a id =mainPageSearchButtonhref =＃>搜寻< / a>
< / form>
是我想要做的事情，还是应该把它吮吸起来，处理搜索按钮下的文本？
我知道我可以创建一个带有透明背景/边框的搜索框，并使用包含div来绘制样式...但这不是一个真正的选择，因为我有多少地方需要在网站上进行更改。
也许我会为此文本输入创建一个新类，使其透明并将正常文本输入样式分配给包含div？您认为什么？
编辑：对不起，我应该包含doctype ...这里是：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR /xhtml1/DTD/xhtml1-strict.dtd\">
另外，我遇到的问题是在IE 7中
尝试使用行高
I have a text input with a search buton absolute positioned over it... to make space for the button I used some padding to keep the text from going under the button, which is fine, it works in firefox, but not IE.
In fact... It doesn't seem like padding on text inputs works at all in IE.
They have the following code
<style type="text/css">
#mainPageSearch input {
width: 162px;
padding: 2px 20px 2px 2px;
margin: 0;
font-size: 12px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background:#F3F3F3 url(form-shadow.png) repeat-x scroll left top;
border-color:#C6C6C6 #C6C6C6 #E3E3E3;
border-style:solid;
border-width:1px;
color:#666666;
}
#mainPageSearch {
margin-bottom: 10px;
position: relative; /* Lets me absolute position the button */
}
#mainPageSearchButton {
display: block;
position: absolute;
top:0px;
right: -2px;
text-indent: -2000em;
height: 22px;
width: 22px;
background: transparent url('images/searchBtn.png') top center no-repeat;
}
</style>
<form id="mainPageSearch" action="">
<input type="text"/>
<a id="mainPageSearchButton" href="#">Search</a>
</form>
Is what I'm trying to do possible or should I just suck it up and deal with the text going under the search button?
I know I could make a search box with a transparent background/border and draw the styling using a containing div... but that isn't really an option because of how many places I've have to change it on the site.
Maybe I'll make a new class for this text input that makes it transparent and assign the normal text input style to the containing div? What do you think?
edit: sorry I should have included the doctype... here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
also, The problems I'm having are in IE 7
try using line-height
这篇关于在IE中填充文本输入...可能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
