25

私はウェブサイトで作業しており、上部のナビゲーションバーに検索ボックスがあり、検索送信ボタンに次のcssを適用しました

#submit {
   background: url("img/new-search-icon.png") no-repeat scroll -1px 0 #FFFFFF;
   border:0 none;
   cursor:pointer;
   display:block;
   height:21px;
   padding:0;
   position:absolute;
   right:0;
   text-indent:-9999px;
   top:0;
   width:20px;
   z-index:2;
}

私の問題はIE7にあります。テキストのインデントが機能していません。デモを見たい場合は、ここをクリックして表示できます。ここをクリックしてください。私を助けてください。

4

14 に答える 14

69

この CSS を追加して、IE7 を動作させます。

text-transform: capitalize;

クレイジーだが真実。

于 2010-06-04T21:48:25.247 に答える
20

上記のような画像置換手法を実装する際に、CSS を IE ブラウザで動作させるにはいくつかのルールがあります。

css 宣言:

text-indent:-9999px;
text-transform:capitalize;


font-size:0;
display:block;
line-height:0;

font-size:0は、フォント サイズを縮小するために使用され、IE7 で適切に機能します。しかし、この行を追加した後でも、IE6 のボタンの中央に黒い線 (基本的にはテキスト) が表示されます。

display:block負のテキスト インデントは、これが追加された場合にのみ IE で機能します。

line-height:0 IE6 の別の修正。

text-transform:capitalizeプロパティを含める正確な理由はわかりませんが、何とか問題を解決しています。

お役に立てれば。

于 2011-05-30T08:36:41.280 に答える
2 

.submit {
    line-height: 0px;
    font-size: 0px;
    /* restante do teu código */
    }

este é um exemplo simse

于 2010-05-29T03:18:42.303 に答える
1

以下だけがあなたのために仕事をします:)

   text-indent:-9999px !important;  
   line-height:0;
于 2012-04-26T13:57:46.260 に答える
1

他に何も正確に機能しない場合、これは次のことを行います。

color: transparent;
text-indent: 0 !important; /* reset the old negative value */

したがって、通常のブラウザは負のテキスト インデントを使用します。ie7 は条件付きコメントを使用して特別な処理を行います。

于 2012-01-05T18:01:26.357 に答える
1

IE8でも同様の問題があります。他のすべての可能性を排除した後、CSS の他の場所で行の高さを宣言すると、テキストのインデントが壊れていました。解決策: line-height を明示的に 0 に設定します。

于 2012-05-04T10:19:26.657 に答える
1

テキスト変換: 大文字にする; 実際には私には何の影響もありませんでした（タグで起こっていました）が、これはうまくいきました

text-indent: -9999px
float: left
display: block
font-size: 0
line-height: 0
overflow: hidden
于 2013-04-06T20:23:48.393 に答える
0

投稿に少し遅れて申し訳ありませんが、負のテキストインデントを使用したIE7の問題の解決策を探していました。私は自分のランダムな方法を試し始め、これに遭遇しました。jUstは、他の人に役立つ可能性がある場合に備えて、Stackに投稿したいと考えていました。

リンクにアイコンを追加しようとしていて、テキストを表示しない。

すべてのブラウザ用の私のCSS

a.lnk_locked , a.lnk_notchecked, a.lnk_checked
{ background: url(../images/icons/icon_sprites.png) no-repeat; padding: 0 2px 0 0;   width:18px; height:18px; 
       vertical-align:middle; text-indent:-9009px; display:inline-block; overflow: hidden; zoom: 1; *display:inline;}
    a.lnk_locked    { background-position: -1px -217px; }

IE7専用のCSS

a.lnk_locked , a.lnk_notchecked, a.lnk_checked
{  text-indent:20px; padding-left:-20px; width:18px;}
于 2011-07-11T19:36:34.153 に答える
0

「その他」に追加したかっただけです（厳密にはトピックに関連しておらず、運用の問題ではありませんが）。

値には必ず「px」を使用してください。つまり、-9999 ではなく -9999px です。

これが機能しなかった理由をデバッグしようとして、10分を費やしました。目の前の価値を見つめる。

私は最近、Silverlight をよく使っていたので、CSS マークアップの要件について十分に理解できていませんでした。うーん。

測定単位を含める必要があります....そうしないと、黙って失敗します。

于 2011-10-07T01:00:19.337 に答える
0

使用しないでくださいtext-indent。代わりにこれを試してください：

display: block;
height: 0;
padding-top: 20px; //The height of your button
overflow: hidden;
background: url(image.png) no-repeat; // Image replacement

IE6 を含むすべてのブラウザーで動作します。

于 2012-07-05T18:41:19.660 に答える
0

IE7 でのテキスト インデントの問題に対して私が見つけた解決策と、このスレッドに追加する必要があると思われるものは次のとおりです。

動作しません:

text-indent: -900009px;

動作します：

text-indent: -9999px;

限界があることを知らなかった？あると思います。

于 2011-12-05T12:12:55.287 に答える
0

上記のすべてを試しましたが、成功しませんでした。float:leftテキストのインデントを取得する前に、追加する必要がありました。IE7 はクレイジーです。クレイジーとは、ひどいという意味です。

于 2012-09-24T14:22:33.707 に答える
0

それが問題の原因かどうかはわかりませんが、background省略表記が間違っていると思います。カラーコードは最後ではなく最初にある必要があります。

于 2010-05-22T14:21:36.537 に答える
0

これは私が使用しているCSSで、IEで機能し、依存していませんtext-indent

.sprite {
    width:100%;
    height:0px;
    padding-top:38px;
    overflow:hidden;
    background-repeat:no-repeat;
    position:relative;
    float:left;
    display:block;
    font-size:0px;
    line-height:0px;
}
.sprite.twitter {
    background-image:url(/images/social/twitter-sprite.png);
    margin-top:8px;
    background-position: 4px 0px;
}
#social-links a:hover .sprite.twitter {
    background-position: 4px -38px;
}
于 2013-03-01T11:56:31.740 に答える