Texteinrückung wird in IE7

Question

nicht funktioniert ich auf einer Website arbeite und auf der oberen Navigationsleiste befindet sich ein Suchfeld, bewarb ich mich das folgende CSS auf die Suchtaste einreichen

#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; 
} 

Mein Problem in IE7 ist der Texteinzug funktioniert nicht Bitte helfen Sie mir Wenn Sie die Demo sehen möchten, können Sie es hier klicken, indem Sie hier klicken Click here. Bitte hilf mir.

Answer 1

Ich weiß nicht, ob es die Ursache Ihres Problems ist, aber ich denke, Ihre background Kurzschreibweise ist falsch; Der Farbcode sollte am Anfang stehen, nicht am Ende.

Answer 2

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

este é um exemplo Simse

Answer 3

diese CSS In den IE7 behave zu machen:

text-transform: capitalize; 

Verrückt, aber wahr.

Answer 4

Bei der Implementierung der Bildwiedergabemethode wie oben, gibt es einige Regeln, um mit CSS zu arbeiten, damit es auf IE-Browsern funktioniert.

CSS-Deklaration:

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


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

font-size: 0 wird verwendet, um die Schriftgröße zu reduzieren und funktioniert gut in IE7. Aber selbst nach dem Hinzufügen dieser Zeile würden Sie eine schwarze Linie (die im Grunde der Text ist) in der Mitte der Schaltfläche in IE6 bemerken.

Anzeige: Block Negativer Texteinzug funktioniert nur im IE, wenn dieser hinzugefügt wird.

Zeilenhöhe: 0 Ein weiterer Fix für IE6.

Text-Transformation: Großschreibung Ich weiß nicht den genauen Grund der Aufnahme der Eigenschaft, irgendwie behebt es das Problem.

Hoffe, das hilft.

Answer 5

Sorry ein wenig zu spät zum Beitrag, aber suchte nach einer Lösung für das IE7-Problem mit negativem Texteinzug. Ich fing an, meine eigenen zufälligen Wege zu versuchen und stolperte darüber. just wollte es auf Stack posten, falls es anderen helfen könnte.

Versucht, ein Symbol zu einem Link hinzuzufügen und den Text nicht anzuzeigen.

Meine CSS für alle Browser

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

Meine CSS nur für IE7

a.lnk_locked , a.lnk_notchecked, a.lnk_checked 
{ text-indent:20px; padding-left:-20px; width:18px;} 

Answer 6

Ich wollte nur für "andere" hinzuzufügen (auch wenn es nicht unbedingt auf die im Zusammenhang Thema und nicht das ops Problem).

Bitte stellen Sie sicher, dass Sie ein "px" für Ihren Wert verwenden. d.h. -9999px nicht -9999.

Ich habe gerade 10 Minuten versucht zu debuggen, warum das nicht funktioniert hat. Den Wert direkt vor mir anstarren.

Ich habe in letzter Zeit viel von Silverlight gemacht und so hat mein Verstand nicht schnell genug zu den CSS Markup Anforderungen gewechselt. Grrr.

Sie müssen eine Maßeinheit .... oder sonst wird es einfach stillschweigend fehlschlagen.

Answer 7

Die Lösung, die ich meinen text-indent Leiden in IE7 gefunden, und etwas, das ich fühle, sollte auf diesen Thread hinzugefügt werden ist folgende:

funktioniert nicht:

text-indent: -900009px; 

Does Arbeit:

text-indent: -9999px; 

Ich wusste nicht, dass es ein Limit gab? Ich denke, da ist es.

Answer 8

Wenn nichts anderes genau richtig funktioniert, dies tut:

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

So normalen Browser den negativen text-indent verwenden, IE7 Sonderbehandlung bekommt mit conditional comments

Answer 9

Nur folgenden wird die Arbeit für Sie tun:)

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

Answer 10

Hat ein ähnliches Problem in IE8. Nachdem alle anderen Möglichkeiten eliminiert wurden, wurde durch eine Zeilenhöhenerklärung an anderer Stelle im CSS der Texteinzug durchbrochen. Lösung: Setzen Sie die Zeilenhöhe explizit auf 0.

Answer 11

Verwenden Sie nicht text-indent. Versuchen Sie diese stattdessen:

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

Funktioniert in allen Browsern einschließlich IE6.

Answer 12

Ich habe alle oben genannten ohne Erfolg versucht. Ich musste eine float:left hinzufügen, bevor es den Texteinzug aufnahm. IE7 ist verrückt, und mit verrückt meine ich schrecklich.

Answer 13

Hier einige CSS Ich verwende, die für mich in IE funktioniert und beruht nicht auf 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; 
} 

Answer 14

text-transform: Kapital; hatte eigentlich keinen Effekt für mich (es war auf einem Tags passiert), aber das hat funktioniert

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