Entfernen von text aus HTML-Schaltflächen auf allen Browsern?

Wir haben Knöpfe in unterschiedlichen Größen und Farben, mit hintergrund-Bildern. Es ist ein Etikett auf dem hintergrund-Bild, aber wir müssen halten Sie die Schaltfläche text in der HTML-Code für usability/accessibility. Wie mache ich den text verschwinden in allen Browsern?

Moderne Browser sind einfach, ich habe gerade verwendet -

color: transparent;

Internet Explorer 7, kann ich nicht bekommen, um zu erfüllen. Ich habe versucht, diese CSS-Eigenschaften, und keiner von Ihnen kann entfernen Sie den text komplett zu zerstören, ohne mein Website-layout in den Prozess.

font-size: 0px;
line-height: 0;
text-indent: -1000em; 
display: block;
padding-left: 1000px;

Wäre ich sehr dankbar, jede Hilfe.

Könnten wir eine Probe erhalten, der HTML-code, den Sie verwenden? Es ist ein bisschen schwer zu verstehen, was Sie versuchen zu tun, ohne es.

InformationsquelleAutor Eric the Red | 2009-11-12

2

Persönlich gehe ich für die ganzen CSS-Ansatz:
```
{ display: block;
text-indent: -9999em;
text-transform: uppercase; }
```
Aus welchem Grund auch immer, text-transform: uppercase; funktioniert der trick für IE7. Natürlich, werden Sie wahrscheinlich haben Sie Ihre eigenen CSS zusammen mit, dass für zusätzliche styling (falls erforderlich).

InformationsquelleAutor Eric Guess
1

In einigen Fällen können Sie das Anwesen "content" zu ändern, was enthalten ist in dem element, persönlich würde ich javascript verwenden, um es zu tun.

Schreiben Sie einfach leere text in das element.

InformationsquelleAutor David
1

Wenn der Knopf ist ein input-submit-button, das Bild verwenden,
```
<input type="image" src="/images/some_image.png" />
```
Können Sie die style diese mit CSS
```
input[type="image"] {
  border: 1px solid red;
  width: 150px;
  height: 35px;
}
```
Wenn Sie sind links, Dave die Antwort.

Eine Eingabe vom Typ image sollten immer eine alt - Attribut angegeben, genau wie für einen normalen image-tag. Da die OP ist besorgt über die Erreichbarkeit, sollten Sie fügen Sie es zu Ihrem Beispiel. So etwas wie alt="Sign me up" würde vollständig lösen das ursprüngliche problem.

InformationsquelleAutor Richard Testani
0

Wie mache ich den text verschwinden
alle Browser?

Ich suppoose Sie möchten die altarnative text verschwinden, wenn das Bild geladen ist.

Für diese puprpose diese:
```
<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />
```
Sie können weitere styles, wenn notwendig, aber dieses minimum wird der job für Sie tun.

Ich denke, er spricht über die normale button-Elemente, keine Bilder.

InformationsquelleAutor Dmytrii Nagirniak
0

Wenn ich verstehe die Frage richtig, dies könnte funktionieren (ich habe keinen IE7 zum testen im moment, also nicht 100% sicher)

Für markup wie dieses:
```
<a href="javascript:return false;" class="button" id="buttonOK"><span
    class="icon">Ok</span></a>
```
Verwenden Sie dieses css:
```
span.icon {
    /*visibility: hidden;*/
    display:block;
    margin-left:-1000;
    width:100px;
}
```
oder dies könnte je nach Ihren Anforderungen für usability/Barrierefreiheit:
```
span.icon {
    visibility: hidden;
}
```
Er arbeitet mit der tatsächlichen Schaltfläche Formular-Elemente, glaube ich.

InformationsquelleAutor Upgradingdave
0

Ich weiß nicht, was die Benutzer /Programme, die Etiketten müssen in den HTML-Code für, aber wenn es für text-Browsern und solchen, vielleicht könnten Sie fügen Sie JavaScript, entfernt die Etiketten onLoad?

JQuery oder Prototype wäre das sehr einfach.

InformationsquelleAutor Pekka 웃
0

Zusätzlich zu Ihrem
```
color: transparent;
```
Können Sie so etwas wie
```
padding-left: 3000px;
overflow: hidden;
```
Hinsichtlich

Nur der Hinweis, color:transparent funktioniert nicht, es ist eine ungültige Eigenschaft in der Farbe. der fix oben wird auch eine Erhöhung der Breite des Elements deutlich

InformationsquelleAutor Manuel Iglesias

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.