Eine der Herausforderungen beim Entwerfen für das Web besteht darin, eine konsistente visuelle Darstellung über verschiedene Browser hinweg sicherzustellen. Es können jedoch bestimmte Probleme auftreten, wie zum Beispiel das Auftreten eines unerwünschten Rahmens um Bilder in Chrome und IE9.
Um diesen Rand zu beseitigen, haben Sie möglicherweise versucht, CSS-Eigenschaften wie „outline: none“ und „border: none“ zu verwenden. aber ohne Erfolg. Dies liegt daran, dass in Chrome ein bekannter Fehler vorliegt, der den Rahmenstil „Keine“ ignoriert.
Der Schlüssel zur Lösung dieses Problems besteht darin, Chrome dazu zu bringen, das Bild als nicht dimensioniert wahrzunehmen. Dies wird erreicht, indem Sie ein Element mit einer Breite und Höhe von 0 Pixeln erstellen und dann einen entsprechenden Abstand hinzufügen, um die gewünschte Bildgröße auszugleichen.
Hier ist ein Beispiel-CSS-Block zur Ausführung dieser Problemumgehung:
<code class="css">#dlbutn { display:block; width:0px; height:0px; outline:none; padding:43px 51px 43px 51px; margin:0 auto 5px auto; background-image:url(/images/download-button-102x86.png); background-repeat:no-repeat; }</code>
Diese Methode eliminiert effektiv die Umrisse und Ränder in Chrome und behält gleichzeitig die gewünschte Bildgröße bei.
Das obige ist der detaillierte Inhalt vonWie entferne ich unerwünschte Bildränder in Chrome und IE9?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!