在IE中填充文本输入...可能吗？

Question

在IE中填充文本输入...可能吗？

Jia*_*aro 22 html internet-explorer padding textinput

我有一个文本输入,搜索按钮绝对位于它...为按钮腾出空间我使用了一些填充来保持文本不在按钮下,这很好,它适用于Firefox,但不适用于IE.

实际上......在IE中,文本输入上的填充似乎不起作用.

他们有以下代码


<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>

Run Code Online (Sandbox Code Playgroud)

我正在尝试做什么,或者我应该把它搞砸并处理搜索按钮下面的文字？

我知道我可以制作一个带有透明背景/边框的搜索框,并使用包含div来绘制样式...但这不是一个真正的选项,因为我必须在网站上更改它的位置.

也许我会为这个文本输入创建一个新类,使其透明并将正常的文本输入样式分配给包含div？你怎么看？

编辑:抱歉我应该包含doctype ...这里是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Run Code Online (Sandbox Code Playgroud)

另外,我遇到的问题是在IE 7中

Answer 1

小智 64

尝试使用行高

我在哪个元素中放置了行高？我的文字仍然在按钮下面.(我将它应用于文本输入.顺便说一下,我的按钮是一个提交输入元素.) (2认同)

Answer 2

小智 10

我有这个问题,我通过添加以下行解决了它

input 
{
    overflow:visible;
    padding:5px;
}

Run Code Online (Sandbox Code Playgroud)

希望这可以帮助？让我知道.

归档时间：	16 年，7 月前
查看次数：	58920 次
最近记录：	8 年前