2008-10-17 23 views
6

¿Es posible crear, por ejemplo, un truco de modelo de caja al usar CSS en línea?CSS en línea IE hackeo

Por ejemplo:

<div id="blah" style="padding: 5px; margin: 5px; width: 30px; /*IE5-6 Equivalent here*/">

Gracias!

+2

¿La cuota de mercado de IE5 realmente vale la pena el esfuerzo? Sugiero poner IE5 en la misma cesta que Netscape 4 y esconder completamente la hoja de estilo. – Kornel

Respuesta

0

La respuesta más adecuada es no. (Editar: para ser claro, me refiero a no hacerlo en línea, no me refiero a no usar CSS piratear)

Editar: Esto no funciona, IE ignora el comentario condicional. Dejando la respuesta aquí para no ser un bastardo.

La siguiente respuesta más apropiada es condicional comentarios:

<div id="blah" style="padding: 5px; margin: 5px; width: 30px; <!--[if lte IE 6]> ... <![endif]-->"> 
+0

Esto no es válido en HTML. –

+0

¿Se pueden escribir tales comentarios condicionales en la etiqueta? –

+0

@Konrad: ¿Por qué no? Es un comentario HTML válido. IE lo interpreta (lo que no es válido), pero sigue siendo un comentario válido. – eyelidlessness

3

sin argumentar a favor o en contra de hacks CSS, personalmente si que tenía que hacer algo por el estilo, yo preferiría usar un comentario condicional:

<!--[if lt IE 7]> 
<style> 
#blah { 
padding: 5px; 
margin: 5px; 
width: 30px; 
} 
</style> 
<![endif]--> 
10

Salgo afuera: abro una clase en ese elemento, o uso la ID que tiene, y manejo el estilo externamente.

También estoy de acuerdo con las respuestas a los comentarios condicionales que preceden al mío.

Dicho esto: como último recurso absoluto, puede usar los siguientes hacks de estilo para apuntar a < = IE6, e incluso IE7. El problema viene cuando/si corrigen IE8 para vencer a su hack.

.foo { 
padding: 5px; 
^padding: 4px; /* this targets all IE, including 7. It must go first, or it overrides the following hack */ 
_padding: 3px; /* this targets >= IE6 */ 
width: 30px; 
} 

Buena suerte.

+1

Para completar, * evidentemente funciona igual que ^. – eyelidlessness

+0

Ciertamente. De hecho, cualquier caracter PERO _ (guion bajo) se puede usar para frustrar IE7. –

12

Usted puede utilizar el "prefijo" hackear en los estilos en línea, así:

<div style="*background:red"></div> 

Sólo asegúrese de poner el IE hacks al final del atributo de estilo. Sin embargo, estoy de acuerdo con la opinión de que los estilos en línea deberían evitarse cuando sea posible. Los comentarios condicionales y un archivo CSS separado para Internet Explorer parecen ser la mejor manera de manejar estos problemas.

0

Tenga en cuenta que IE 6 necesita el modelo de caja hackear en modo peculiaridades pero no en el modo normas. IE 5 e IE 5.5 necesitan BMH todo el tiempo.

Así que si estás en modo estándar, tendrá que usar algo como the original voice-family hack (que dirige IE 5.X y no IE 6). Si estás en modo peculiar, cualquier viejo IE < = 6 hack hará.

(El contenido de su pregunta me sugiere que su página se representa en el modo de peculiaridades.)

0

Sí, como todos los anteriores, si se puede evitar hacerlo en línea hacer !!Pero si realmente tiene que ir en línea a continuación, los filtros del analizador son probablemente la mejor opción, estos son ciertos caracteres que se pueden utilizar en las propiedades tales como el hack subrayado en IE6

print("code sample"); 

style="position:relative;padding:5px; _position:absolute; _padding:10px;" 

IE6 seguirá recibiendo los estilos subrayados, todos los demás ¡simplemente los ignorará!

También está usando! Important en lugar de subrayado.

tienen un juego alrededor y ver lo que sucede, pero una vez más como la de arriba, tratar de evitar como la peste :)

0

La mejor solución es trabajar en modo estándar en lugar de modo Peculiaridades .... que va elimina la necesidad de la mayoría de los hacks de tu modelo de caja de inmediato.

Más allá de eso, los comentarios condicionales con una hoja de estilo específica de IE son mucho más limpios y más fáciles de mantener. Ese método ha sido lo suficientemente bueno para la mayoría de los diseñadores de primer nivel en los últimos años ... a menos que haya algo específico sobre su sitio que requiera que todo esté en línea, sugiero dar un paso atrás y analizar los problemas de raíz en lugar de cómo puedes parchar estos pequeños síntomas a medida que aparecen. alt text http://sonicloft.net/im/52