Firefox 3.5.7: Wie kann der Mangel der abgerundeten Kanten eines Bildes fixieren

Manchmal muss man einfach einen Artikel zu verschieben, verändern die Sicht auf ein Problem zu lösen scheint unüberwindbar. Wenn man mit der Kompatibilität zwischen Browsern und CSS zu tun, zu erfinden Lösungen "spektakulär" hat (Stunts sagen würde) ist auf der Tagesordnung. , per Safari e Google Chrome. Was ich Ihnen eine einfache Möglichkeit, abgerundete Ecken, um Bilder mit gelten -moz-border-radius , die für Mozilla FireFox und -webkit-border-radius , Safari und Google Chrome.
Normalerweise sind diese CSS-Attribute in den Behältern wie angewandte div :

1
2
3
4
5
6
7
8
div # box {
100px ; width: 100px;
100px ; height: 100px;
; -Moz-border-radius: 16px;
; -Webkit-border-radius: 16px;
#eee ; background: # eee;
1px solid #666 ; border: 1px solid # 666;
}

Mit HTML-Code wie folgt aus:

1
"box" >< / div > < div id = "box"> </ div >

Beziehen:

Zu wollen, die gleiche Sache auf ein Bild machen, merkt man, dass das Ergebnis teilweise ist vollbracht! Mit einem CSS wie folgt aus:

1
2
3
4
5
6
{ # Img {border-Runde
; -Moz-border-radius: 8px;
; -Webkit-border-radius: 8px;
#eee ; background: # eee;
1px solid #666 ; border: 1px solid # 666;
}

Auf einer HTML-Formatierung wie folgt aus:

1
"round-border" src = "images/undolog.png" alt = "Round Image Test" / > < img id = "round-border" src = "images / undolog.png" alt = "Image-Test-Runde" />

Safari und Google Chrome gut ansprechen:

Während FireFox überrascht zeigt:

Wie Sie aus dem obigen Screenshot sehen kann, FireFox 3.5.7 on the edge "abgerundet", aber das Bild zu bleiben scheint Platz haben!
Ein einfaches Gerät - in speziellen Fällen sinnvoll - können Sie ganz einfach das Problem zu lösen:

1
2
3
4
5
6
div # box {
; -Moz-border-radius: 8px;
; -Webkit-border-radius: 8px;
url ( http://dominio.com/images/undolog.png ) no-repeat ; background: url (http://dominio.com/images/undolog.png) no-repeat;
1px solid #666 ; border: 1px solid # 666;
}

– impostando il suo sfondo con l'immagine che vogliamo visualizzare con i bordi arrotondati. In der Praxis, anstatt direkt mit dem Tag img verwenden wir einen Container überhaupt - in diesem Fall ein div - Einstellung den Hintergrund mit dem Bild wollen wir mit abgerundeten Kanten zu sehen.
Diese Lösung hat natürlich eine Reihe von Nachteilen:

  1. ), di conseguenza nel DOM html non esiste nessuna immagine, il ché significa che eliminando i fogli di stile la nostra immagine scompare Wir verloren das Tag img (mit seinem Attribut alt ), so gibt es keine html in den DOM Bild, was bedeutet, dass die Beseitigung der Stylesheets unser Bild verschwindet
  2. Nachdem ein Container (in unserem Fall eine Definition div ) die Verwendung von Stylesheets, müssen wir seine Größe zu Beginn wissen,

Wie ich geschrieben habe mehrfach in diesem Blog möchte nur den Fall, dass der "Standard" CSS (2 oder 3 ist) seinen Namen zu ändern, um "jeder macht was er will" sein ...

One Response to "Firefox 3.5.7: Wie kann der Mangel der abgerundeten Kanten eines Bildes fix"

  1. 21. Januar 2010 vik :

    jeder tut, was er will

    lol
    Nichts ist wahr und das Traurige ist, dass mit der CSS 3 "Trennung" ist steigend. Auf der anderen Seite ich nicht alles geben würde, die Schuld auf die Macher des Browsers sind einige Standards, die von W3C sehr vage.

    Antwort zitieren

Hinterlasse einen Kommentar

XHTML TAG PERMIT: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL


Stoppen SOPA