22

我有一个带有绝对搜索按钮的文本输入...为按钮腾出空间我使用了一些填充来防止文本进入按钮下方，这很好，它适用于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>

我正在尝试做的事情是否可能，或者我应该把它吸起来并处理搜索按钮下的文本？

我知道我可以制作一个带有透明背景/边框的搜索框，并使用包含 div 来绘制样式……但这并不是一个真正的选择，因为我必须在网站上更改多少个地方。

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

编辑：对不起，我应该包括文档类型......这里是：

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

另外，我遇​​到的问题在 IE 7 中

4

9 回答 9

65

尝试使用 line-height

于 2009-12-15T23:12:34.613 回答
10

我也遇到了这个问题，我通过添加以下行来解决它

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

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

于 2011-03-18T22:26:39.857 回答
4

尝试border-right代替padding-right. 这对我有用。

于 2011-06-24T11:45:30.823 回答
4

使您的输入透明并将样式放置在容器 div 中：

http://jsfiddle.net/LRWWH/211/

HTML

 <div class="input-container">
 <input type="text" class="input-transparent" name="fullname"> 
 </div>

CSS

 .input-container {
    background:red;
    overflow:hidden;
    height: 26px;
    margin-top:3px;        
    padding:6px 10px 0px;
    width: 200px;
  }

 .input-transparent {
    background-color:transparent;
    border:none;
    overflow:hidden;        
    color:#FFFFF;
    width: 200px;
    outline:none;
  }
于 2012-04-06T13:22:21.580 回答
4

有一个仅适用于它的 css 修复程序

div.search input[type="text"] {
    width: 110px;
    margin: 0;
    background-position: 0px -7px;
    text-indent:0;
    padding:0 15px 0 15px;
}
/*ie9*/ div.search input[type="text"] {
    border-left: 25px solid transparent;
}
/*ie8*/ div.search input[type="text"] {
    border-left: 25px solid transparent;
    background-position-x: -16px;
    padding-left: 0px;
    line-height: 2.5em;
}

感谢穆罕默德·阿提夫·楚格泰

于 2013-03-14T11:59:02.813 回答
3

在应用填充/边距之前，您必须在“#mainPageSearch 输入”上使用 float: left/right。

于 2009-03-03T16:56:17.230 回答
1

我遇到了类似的问题 - IE 正在填充输入字段，但没有使其变大，从而将文本向下推入其中。我也通过设置输入的高度来修复它。试试看。

于 2010-07-28T22:39:42.990 回答
0

我在 IE7 中有以下工作。你的目标是什么版本？

<style type="text/css">

    input#test {
        padding: 10px;
    }

</style>


<input type="text" id="test" />
于 2009-03-03T16:57:55.977 回答
0

声明 DOCTYPE 怎么样？

<!DOCTYPE html>通过在 IE8 中添加填充对我来说非常有用。以下面的代码为例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myInput {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <input id="myInput" value="Some text here!" />
  </body>
</html>
于 2013-05-27T11:08:44.057 回答