Firefox 3.5.7: cómo solucionar el defecto de los bordes redondeados de una imagen

A veces sólo hay que mover un elemento, cambiar el punto de vista, para resolver un problema parece insuperable. Y cuando uno tiene que ver con la compatibilidad entre navegadores y CSS, inventando soluciones "espectacular" (dobles diría) está en la agenda. , per Safari e Google Chrome. Lo que yo te mostraré una manera fácil de aplicar a las imágenes de esquinas redondeadas con -moz-border-radius , que está disponible para Mozilla Firefox y -webkit-border-radius , Safari y Google Chrome.
Normalmente estos atributos CSS se aplican al contenedor como div :

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

Con el código HTML siguiente:

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

Próximamente:

Querer hacer lo mismo en una imagen, nos damos cuenta de que el resultado está parcialmente hecho! El uso de un CSS de esta manera:

1
2
3
4
5
6
{ # Img {border todo el año
; -Moz-border-radius: 8px;
; -Webkit-border-radius: 8px;
#eee ; background: # eee;
1px solid #666 ; border: 1px solid # 666;
}

En un formato HTML como este:

1
"round-border" src = "images/undolog.png" alt = "Round Image Test" / > < img id = "ronda de las fronteras" src = "images / undolog.png" alt = "Imagen de la Ronda de prueba" />

Safari y Google Chrome responden bien:

Mientras mostraba FireFox sorprendente:

Como se puede ver en la captura de pantalla anterior, en Firefox 3.5.7 a bordo "redondeada", pero parece que la imagen se ha cuadrado!
Un dispositivo simple - útil en casos especiales - hace que sea posible para resolver fácilmente el problema:

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. En la práctica, en lugar de utilizar directamente la etiqueta img , se utiliza un contenedor de todos - en este caso un div - mediante el establecimiento de su fondo con la imagen que queremos mostrar con bordes lisos.
Esta solución, obviamente, tiene una serie de inconvenientes:

  1. ), di conseguenza nel DOM html non esiste nessuna immagine, il ché significa che eliminando i fogli di stile la nostra immagine scompare Hemos perdido la etiqueta img (con el atributo alt ), así que no hay html en la imagen DOM, lo que significa que la eliminación de hojas de estilo a nuestra imagen desaparece
  2. Tener que definir un contenedor (en nuestro caso un div ), utilizando hojas de estilo, tenemos que saber en el inicio de su tamaño

En repetidas ocasiones he escrito en este blog se que pasa es que el "estándar" de CSS (2 o 3 que es) da como resultado un nombre diferente a "todo el mundo hace lo que quiere" ...

One Response to "Firefox 3.5.7: cómo solucionar el defecto de los bordes redondeados de una imagen"

  1. 21 de enero 2010 vik :

    cada uno hace lo que quiere

    lol
    Nada es más cierto y lo triste es que con CSS 3, la "separación" es cada vez mayor. Por otro lado yo no le daría toda la culpa a los fabricantes de navegadores, algunos estándares establecidos por W3C son muy vagas.

    Responder Cita

Deja un comentario

TAG PERMISOS XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> código de inserción: 
 <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


Deje de SOPA