soporte para dimensionamiento de cajas en IE7

Hay varias maneras de hacer esto, ninguna perfecta.

Como usted señala:

• Firefox / Opera / Safari / Chrome / IE8+ reconocerá la propiedad box-sizing que le permite usar border-boxes.
• IE6 utilizará la vieja escuela (¿correcto?) modelo border-box por defecto.
• Sin embargo, IE7 utiliza el modelo de caja de relleno W3C cuando está en modo estándar, y no reconocerá la propiedad CSS box-sizing, por lo que no hay forma de volver al modelo de caja de borde. Si necesita soportar IE7 (y probablemente todavía lo haga), está atascado con una de las cuatro opciones:

1. Comentarios condicionales:

<!--[if IE 7]>
  Special instructions for IE 7 here
<![endif]-->

Utilice el tamaño de la caja para IE8 y 9, luego haga sobreescrituras específicas para IE7. Esta opción será dolorosa.

2. El Schepp Caja Tamaño Polyfill:

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 para que utilicen el cuadro W3C modelo. Está bien para uso ligero, pero puede causar problemas propios si se usa ampliamente. Usar con precaución y PROBAR.

3. Divs Anidados Estilo Antiguo:

El enfoque de div anidado al viejo estilo sigue siendo una buena manera:

<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 use relleno en un fijo el elemento width sigue siendo true.

4. Mi Solución Preferida-Un Selector Secundario Directo:

Al revés, esto es con el selector secundario directo. Digamos que tienes un div de ancho fijo que contiene algo de contenido:

<div class="content">
  <h1>Hi</h1>
  <p>hello <em>there</em></p>
</div>

Luego puede escribir una regla para agregar márgenes izquierdo y derecho a todos los hijos directos del div:

.content {
  width:500px;
  padding:20px 0;
}
.content > * {
  margin:0 20px;
}

Esto agregará un pequeño margen a h1 y p, pero no al em anidado, dando la apariencia de relleno de 20px en el div de contenido, pero sin activar el error del modelo de caja.

5. Considere la posibilidad de dejar de IE7 apoyo

IE7 es el último navegador que no reconoce la propiedad box-sizing. Si usted está recibiendo poco tráfico de IE7, que podría considerar dejar de soporte. Su CSS será mucho mejor.

A finales de 2013, esta es mi opción preferida.

2017 EDITAR: Probablemente ya es hora de eliminar el soporte para IE7 ahora, y solo use border-box.

Puede 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 diagonal y luego vaya desde allí).