css - respeta - soporte de tamaño de caja en IE7
pagina web no se ve bien en internet explorer (3)
Puedes usar un polyfill para que funcione en algunos elementos, aunque no funcionó para mis campos de entrada.
https://github.com/Schepp/box-sizing-polyfill
box-sizing: border-box;
*behavior: url(/css/boxsizing.htc);
Solo tenga en cuenta que la url de comportamiento es relativa a la página y no al archivo css. Use rutas relativas a la raíz del sitio (inicie la url con una barra inclinada y luego vaya desde allí).
Acabo de descubrir la propiedad de box-sizing: border-box que resuelve un montón de problemas de diseño de navegador cruzado para mí.
El único problema que ahora tengo es que IE7 no parece apoyarlo. ¿Hay algún truco para que IE7 lo admita?
Supongo que estás usando esto para sortear el modelo de caja de IE6. Lamentablemente, no existe una forma general de engañar a las versiones anteriores de IE para admitir propiedades CSS arbitrarias.
Yo recomendaría no usar la propiedad de box-sizing , porque cada navegador que no sea IE6 implementará correctamente el modelo de caja. El artículo de Wikipedia hace un buen trabajo explicando cómo difiere IE6.
Para resolver esto, recomiendo usar una hoja de estilos separada para IE6, e incluirla usando los comentarios condicionales de IE . En su hoja de estilos IE6, puede especificar diferentes anchos / alturas / relleno / márgenes para que su diseño se vea coherente. Puede incluir una hoja de estilos para IE6 solo así:
<!--[if IE 6]>
<link href="ie6sucks.css" rel="stylesheet" type="text/css" />
<![endif]-->
Hay varias formas de hacer esto, ninguna perfecta.
Como usted señala:
- Firefox / Opera / Safari / Chrome / IE8 + reconocerá la propiedad de tamaño de caja que le permite usar cuadros de borde.
- IE6 utilizará el modelo de cuadro de borde de la escuela antigua (¿correcto?) De forma predeterminada.
- Sin embargo, IE7 usa el modelo de la caja de relleno W3C cuando está en modo estándar, y no reconocerá la propiedad de tamaño de caja de CSS, por lo que no hay forma de volver al modelo de cuadro de borde. Si necesita admitir IE7 (y probablemente aún lo haga), tiene una de las siguientes cuatro opciones:
1. Comentarios condicionales:
<!--[if IE 7]>
Special instructions for IE 7 here
<![endif]-->
Use el tamaño de la caja para IE8 y 9, luego haga modificaciones específicas para IE7. Esta opción será dolorosa.
2. El Polyfill del tamaño de la caja de Schepp:
https://github.com/Schepp/box-sizing-polyfill
Este excelente Polyfill es un archivo HTC que modifica el comportamiento predeterminado del navegador en IE6 y 7, por lo que utilizan el modelo de caja W3C. Está bien para uso liviano, pero puede causar problemas propios si se usa extensivamente. Usar con precaución y PRUEBA.
3. Divisiones anidadas de estilo antiguo:
El enfoque div anidado de estilo antiguo sigue siendo una buena forma:
<div style="width:100px; border:1px solid black">
<div style="margin:10px">
Content
</div>
</div>
Un div anidado no semántico proporciona el relleno indirectamente, con la desventaja de que su marcado se vuelve desordenado. Obviamente, no use estilos en línea, los estoy usando aquí por el bien de la ilustración.
El viejo adagio Nunca usar relleno en un elemento de ancho fijo sigue siendo cierto.
4. Mi solución preferida: un selector directo para niños:
A la inversa, esto es con el selector de niños directo. Supongamos que tiene un div de ancho fijo que contiene cierto contenido:
<div class="content">
<h1>Hi</h1>
<p>hello <em>there</em></p>
</div>
A continuación, puede escribir una regla para agregar márgenes izquierdos y derechos a todos los hijos directos del div:
.content {
width:500px;
padding:20px 0;
}
.content > * {
margin:0 20px;
}
Esto agregará un pequeño margen al h1 y p, pero no al em anidado, dando la apariencia de un relleno de 20px en el div de contenido, pero sin activar el error del modelo de caja.
5. Considere dejar caer soporte IE7
IE7 es el último navegador que no reconoce la propiedad de tamaño de caja. Si obtiene poco tráfico de IE7, podría considerar la posibilidad de retirar el soporte. Tu CSS será mucho más agradable.
A finales de 2013, esta es mi opción preferida.
EDITACIÓN 2017: Probablemente ya sea hora de dejar de admitir IE7 ahora, y simplemente usar border-box.