Frage IE7 KNOPF weißer Umriss


Weiß jemand, warum IE6 und IE7 eine weiße Grenze zwischen a hinzufügen button Grenze und der Hintergrund?

Hier ist mein CSS und HTML:

#reportButton{
    background:#fefcda url(buttonback.png) repeat-x bottom left;
    border-top:2px solid #fffff8;
    border-right:2px solid #e3b40c;
    border-bottom:2px solid #e3b40c;
    border-left:2px solid #fffff8;
    color: #373535;
    font-weight: bold;
    margin:0 2%;
    width:45%;
}

<button id="reportButton">Report a Concern</button>

Wenn Sie dies versuchen, sehen Sie eine lustige weiße Grenze zwischen den Grenzen und dem Hintergrund. Dies erscheint in keinem anderen Browser, nicht einmal IE8.

Jeder hat eine einfache Lösung oder einen Vorschlag, was ich falsch mache?

Vielen Dank!

EDIT: Mir ist gerade aufgefallen, dass, wenn ich auf den Knopf klicke, die marschierenden Ameisen auftauchen und die weiße Grenze verschwindet. Es scheint, als ob der Knopf ist :active Sie verschwinden, obwohl mir das bei der Lösung des Problems nicht viel hilft, vielleicht für jemand anderen.

Außerdem kann ich leider keinen Bildschirm zur Verfügung stellen. Ich habe keinen Ort, um es jetzt über diese Internetverbindung hochzuladen.

EDIT2: Es scheint tatsächlich, dass die Grenze nicht weiß ist, sondern die background-color der Schaltfläche. Es scheint, dass IE eine 1px-Lücke zwischen dem Schaltflächenrand und dem Schaltflächenhintergrundbild belässt.


6
2017-07-06 19:25


Ursprung


Antworten:


Ich hatte das gleiche Problem ... ordentlicher Trick, der zumindest für IE funktioniert: Der "weiße" Umriss ist eigentlich die Hintergrundfarbe Ihres Bildes. Setzen Sie diese Einstellung so, dass sie der Rahmenfarbe entspricht. Wenn Ihnen eine leicht dichte Grenze nichts ausmacht, sollten Sie aufhören. Wenn der Rahmen jetzt zu dick ist, legen Sie die Rahmenfarbe auf die Hintergrundfarbe der Seite fest.

z.B. Um eine schwarze "Grenze" anzuzeigen, verwenden Sie dieses CSS für Ihre Schaltfläche: Hintergrund: URL (./ button_bg.gif) keine Wiederholung; Hintergrundfarbe: # 000000; Grenze: 1px fest #FFFFFF;


4
2017-11-11 21:29



Stellen Sie sicher, dass dieser Rahmen nicht aus dem Bild selbst (Hintergrund des Bildes) kommt, stellen Sie die Genauigkeit ein width und heightVersuchen Sie auch, die Einstellung zu ändern padding zu 0 wie @SLaks sagte.


1
2017-07-06 19:31