HTML
<input class="button" type="button" value="Go">
.. or ..
<button class="button">Go</button>CSS
input.button { text-indent: -9000px; text-transform: capitalize; }Ein negativer Einzug allein reicht leider nicht aus, um Text aus einem Schaltflächenelement in IE7 zu entfernen. Aber fügen Sie text-transform: capitalize; hinzu und fertig!
Danke dafür, mein Lieber! Ich habe nach einer Lösung gesucht, um den Absenden-Text in IE7 zu entfernen, das war ein Rätsel!
Die Texttransformation ist eine merkwürdige Sache, aber ich schätze, das ist eben IE! Danke nochmals, Mark.
Wow, Chris schlägt wieder zu.
Ich habe zuvor line-height: -9999px; für dieses Problem verwendet und es hat funktioniert.
Seltsamerweise versagt diese Methode in IE Tester bei mir. Ich suche bei Google nach
„Text auf Schaltflächen in IE entfernen“
Wer war auf der ersten Seite der SERPs?
Niemand anders :)
Danke Chris!
Hallo
Ich benutze
text-indent: -9000px; text-transform: capitalize;
Das funktioniert in IE7, aber der eigentliche Verknüpfungsbereich, wo die Hände erscheinen, ist begrenzt. Ich habe versucht, die Breite anzupassen, aber es funktioniert nicht.
Gibt es eine Lösung?
…und auch IE8. Gute Arbeit – danke!
{font-size: 0px; line-Height: 0px;}
Macht dasselbe
Im Gegenteil, {font-size: 0px; line-Height: 0px;} hinterlässt eine kleine schwarze Linie über der Schaltfläche, die den Text in unglaublich kleiner Größe darstellt.
Die von Chris Coyier hier gepostete Lösung war die einzige, die für mich funktioniert hat. Vielen Dank, Chris!
Ich verwende padding-left, um den Schaltflächentext zu entfernen. Es funktioniert genau
GENIAL! Vielen Dank!
Fantastisch! Vielen Dank!
Du hast gerade mein Leben gerettet :D
Sie, sind ein verrückter Genie!
dieser Browser ist ein Arschloch.
Pure Brillanz, würde ich sagen – vielen Dank!
Gute Korrektur… danke vielmals!
Gut gemacht, mein Herr! Aber was ist, wenn Ihr Browser 9000px breit ist. Nur ein Scherz!
Ich habe festgestellt, dass dies für IE7 nicht funktionierte (nun ja, IE8 im ‚IE7-Modus‘); Die Texttransformation brachte die Schaltflächen nicht von ausserhalb des Bildschirms zurück.
Was funktionierte, war, NICHT text-indent oder text-transform zu verwenden und stattdessen
line-height: 100px;
font-size: 0px;
Also, während die Schriftgröße in einigen Browsern eine winzige Buchstabenreihe auf dem Bildschirm hinterlässt, wird diese Reihe durch die Zeilenhöhe ausgeglichen. (Die Zeilenhöhe scheint in Firefox nicht zu funktionieren, aber Firefox respektiert die Schriftgröße von 0. Verwenden Sie eine größere Zeilenhöhe für größere Grafiken.)
Sie sollten niemals font-size: 0px; verwenden, wenn Sie es vermeiden können, da einige unterstützende Technologien diesen Text überhaupt ignorieren (und somit nicht wissen, wofür Ihre Schaltfläche dient). Außerdem ist die winzige Buchstabenreihe ein unerwünschter Artefakt für viele Entwickler/Designer.
Das hat mir viel Ärger erspart, danke!
Eine riesige Hilfe! Danke!
Keine verdammte Weise! Vielen Dank für das Posten dieser Lösung – IE ist weniger wie Programmieren und mehr wie Hexerei!
letter-spacing:9999em; in Kombination mit text-indent funktioniert auch :)
Danke Ricardo, dein Vorschlag ist der einzige, der für mich ohne weitere Auswirkungen funktioniert hat.
Hah! Ich weiß nicht, was es mit text-transform: capitalize; auf sich hat, aber es hat wie ein Zauber funktioniert. Danke.
LOL, das ist einfach verdammt seltsam. Gut gemacht.
Also, ich habe diese Eigenschaften verwendet
font-size: 0px;
line-height: 0px
Funktioniert gut.
Rennan, ich habe das auch versucht und dann festgestellt, dass mein Hintergrundbild in Safari und Firefox unter Mac um ein Pixel verschoben war. Sie sollten das überprüfen, wenn Ihre Pixelpräzision wichtig ist. :)
Ich wusste, dass ich die Lösung hier finden würde! Ich habe das ganze Jahr über nach dummen Wegen gesucht, um das zu umgehen.. haha.. Danke Mann :)
Danke dafür, Chris, hat wunderbar funktioniert!
Danke dafür, es funktioniert einfach, hat mir noch etwas „Haarausfall“ erspart.
Funktioniert gut in IE7 & IE8 – danke Chris!
Das ist verrückt, aber es funktioniert. Danke fürs Teilen.
Der wohl erstaunlichste Hack aller Zeiten. Sie, mein Herr, sind eine Legende.
Ich würde das eher als zufälligen Fehlschlag bezeichnen lol… völlig zufällig und funktioniert trotzdem.
Vielen Dank
Oh wow. Wie hast du das jemals herausgefunden. :P
Danke
Wow… wirklich. Hat meine IE7-Kopfschmerzen behoben. Danke.
Ähm, Vorsicht damit.. einige Browser erstellen tatsächlich eine horizontale Scrollleiste für die Distanz, die Sie mit text-indent einrücken. Nicht nur alte Browser… der erste, der mir einfällt, ist Opera 9.8.
Immer browserübergreifend testen!
Ich kann es nicht fassen, dass das funktioniert hat…
Alles andere als inherit und none funktioniert auch.
Das gesagt, es funktioniert nicht immer. Ich kämpfe gerade mit einer Absendeschaltfläche, die sich mit dem Text einrückt und dadurch auch vom Bildschirm verschwindet!
Es funktioniert woanders, also versuche ich gerade, die Unterschiede zu finden.
Ich möchte nur wissen, wie zum Teufel du auf diese Lösung gekommen bist.
Genial!
Hallo zusammen.
Versuchen Sie, negativ in positiv zu ändern.
Ändern
text-intend: -9999px;
zu
text-intend: 9999px;
sieht so aus, als ob es funktioniert.
Vielen Dank, funktioniert wie ein Zauber :D
Vielen Dank.
Vielen Dank für diese Korrektur! Ich war völlig ratlos, wie ich das beheben sollte, und das hat funktioniert :)
Könige für Sie! Großartige Lösung, vielen Dank.
Ich liebe diese Schnipsel! text-transform wirklich, hätte das nie erwartet :P
was ist mit button {color = transparent>} würde das nicht reichen? ^^
Brillant! Habe seit 5 Jahren mit diesem Problem gekämpft.
wie wäre es mit
button { color : rgba(0,0,0,0); color : transparent; font-size : 0%; }Ich glaube, das macht dasselbe
Ja, ja, ja, brillant ist es. Vielen Dank, Chris!
lustig, ich muss sagen, dass ich schon lange Webdesign mache und mich die ganze Zeit im Web umschaue, und erst vor ein paar Monaten bin ich auf Ihre Seite gestoßen.
Und raten Sie mal, ich liebe es einfach. Es fühlt sich an, als hätten Sie die gleichen Probleme wie alle anderen gehabt, aber anstatt einer Seite mit nur Theorie, teilen Sie einfach Ihre Erfahrungen mit konkreten Beispielen.
Und ich komme immer wieder und wieder und wieder für mehr.
Sehr schöne Ressourcen-Website. Vielen Dank.
ps: Sie sind jetzt in meiner morgendlichen RSS-Liste!
Ich bin so froh, dass dies bei einer Google-Suche aufgetaucht ist. Eine so einfache Lösung für ein ärgerliches Problem, danke!
Nur für den Fall, dass es jemandem hilft. Die {font-size: 0px; line-Height: 0px;} ist eine brillante Lösung für E-Mail-Vorlagen bei der Arbeit mit dem iPhone 3 und 3s. Aus irgendeinem Grund hat es Padding am unteren Rand von Kopfzeilenbildern hinzugefügt..
Vielen Dank für diese Informationen, ich habe auch festgestellt, dass
input.button{
width:114px;
height:37px;
border: none;
background: transparent url(images/submit_btn.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
font-size: 0;
display:block;
line-height: 0;
}
Funktioniert!
Scheint auch jedes Hintergrundbild, das Sie verwenden, auszublenden. :( Gibt es dafür eine Lösung?
Vielen Dank für das Teilen dieses Codes…. :)
Wieder einmal Nummer eins bei Google für meine Suche, gut gemacht Chris!
Ich liebe diese einfachen CSS-Code-Schnipsel… Danke für diesen ;-)
Das ist pure Verrücktheit!
Wirklich genial! Vielen Dank für die Korrektur! Wie um alles in der Welt hast du das herausgefunden??
Das HTML5-Boilerplate verwendet nun die folgende Methode, um Text auszublenden, was angeblich in IE7 funktioniert.
Schauen Sie sich Nicolas Gallaghers Blogbeitrag dazu an.
Seltsam, aber es hat funktioniert, vielen Dank!
Das hat mich zum Nachdenken gebracht, und ehrlich gesagt auch die Lösung, aber wenn es funktioniert, dann funktioniert es. Danke, mein Lieber.
Fügen Sie auch "overflow: hidden" mit text-indent hinzu. Sollte funktionieren. Danke Chris….
Wenn ich hier nichts übersehe, scheint die Lösung einfach zu sein. Machen Sie einfach den Eingabewert zu einem leeren String, damit Sie von Anfang an keinen Text haben.
<input type=”submit” value=”” />
und fertig!
Ich verwende diesen Ansatz in meinem Code.
Ich benutze diesen Trick schon seit einer Weile. Manchmal funktioniert er nicht, aber ich behalte ihn auf jeden Fall in einem bedingten Stylesheet. Die Verwendung von color:transparent funktioniert normalerweise für moderne Browser. Habe nicht versucht, den Einzug positiv zu ändern, wenn das Schaltflächenbild von der Seite geschoben wird, aber ich werde es jetzt ausprobieren!
Ich würde den Wert nicht aus dem Input entfernen, wenn Ihnen Barrierefreiheit wichtig ist!
Danke für all die Tipps!
Danke Chris, funktioniert super!
Eine so unintuitive Lösung. Das hat mir viel Zeit gespart.
Funktionierte nicht für mich. Aber ich habe es in mein CSS aufgenommen und jetzt funktioniert es wie ein Zauber :)
zoom:expression(
this.runtimeStyle.zoom=1,
this.value=”
);
funktioniert nicht richtig, wenn wir „go“ in Kleinbuchstaben verwenden, sollte es von CSS in Go konvertiert werden, hat es aber nicht.
Das ist ein bisschen seltsam, aber GENIAL! Danke :)
Funktioniert auch für IE Kompatibilitätsansicht in IE 8+, die standardmäßig für Intranets aktiviert ist. Danke!