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を含める必要がありました...ここにあります:

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

行の高さを使用してみてください

于 2009-12-15T23:12:34.613 に答える
10

私はこの問題を抱えていましたが、次の行を追加して解決しました

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

お役に立てれば?お知らせ下さい。

于 2011-03-18T22:26:39.857 に答える
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 に答える
4

border-rightの代わりに試してくださいpadding-right。これは私にとってはうまくいきました。

于 2011-06-24T11:45:30.823 に答える
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 に答える