web-dev-qa-db-ja.com

IE7ではテキストのインデントが機能しません

私はウェブサイトで作業していて、上部のナビゲーションバーに検索ボックスがあります。検索送信ボタンに次の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にあり、テキストのインデントが機能していません。デモを表示したい場合は、ここをクリックしてください ここをクリック 。私を助けてください。

htmlcssinternet-explorerinternet-explorer-7text-indent
25
user255631

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

text-transform: capitalize;

クレイジーだが本当。

69
Kramer

上記のような画像置換技術を実装している間、それをIEブラウザで動作させるためにcssと一緒に行くいくつかのルールがあります。

css宣言：

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


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

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

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

line-height： IE6の別の修正。

text-transform：capitalizeプロパティを含める正確な理由はわかりませんが、どういうわけか問題が修正されています。

お役に立てれば。

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

esteéumexemplosimse

2
lerry

text-transform：大文字;実際には効果はありませんでした（タグで発生していました）が、これは機能しました

text-indent: -9999px
float: left
display: block
font-size: 0
line-height: 0
overflow: hidden
1
Horse

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

   text-indent:-9999px !important;  
   line-height:0;
1
Somnath

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

1
Robin

他に正確に機能するものがない場合、これは次のようになります。

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

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

1
ori

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を含むすべてのブラウザで動作します。

0
Igor Barbashin

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

値に「px」を使用していることを確認してください。つまり、-9999ではなく-9999pxです。

なぜこれが機能しなかったのかをデバッグするために10分を費やしました。目の前の価値を見つめています。

私は最近Silverlightをたくさんやっているので、CSSマークアップ要件に十分な速さで頭をひっくり返すことができませんでした。 Grrr。

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

0
rism

IE7でテキストインデントの問題を解決し、このスレッドに追加する必要があると感じた解決策は次のとおりです。

動作しません：

text-indent: -900009px;

動作します：

text-indent: -9999px;

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

0
BWLR

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

0
Mark

これが私が使用している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;
}
0
Dex

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

0
jeroen

投稿に少し遅れて申し訳ありませんが、否定的なテキストインデントを使用した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;}
0
Yogurt The Wise