Cómo habilitar el tamaño de la caja en Internet Explorer 7 [Quicktip]

Hemos cubierto el tamaño del cuadro CSS3 en un artículo anterior. Tamaño de caja, con el valor de border-box, nos permite retener el ancho y la altura del elemento, independientemente del relleno y borde adicional que tenga.

Esto hace que medir y definir el tamaño del elemento sea más fácil . Sin embargo, CSS3 Box Sizing no funcionaría en Internet Explorer 7 (IE7) y versiones anteriores, como puede ver a continuación.

Las dos columnas que ve en la captura de pantalla anterior tienen width, height, padding y box-sizing especificados. Pero como IE8 no reconoce la propiedad de box-sizing, la segunda columna se empuja hacia abajo cuando su ancho total supera el ancho del contenedor principal .

Deberá ajustar el tamaño de cada columna para que quepan, lo que podría ser una tarea muy tediosa según la cantidad de elementos que necesite manipular . Si su sitio web tiene que ser compatible con IE7 (por cualquier razón) y al mismo tiempo preservar el tamaño del cuadro de CSS3, puede usar el siguiente truco.

Tamaño de la caja Polyfill

Para que IE8 (y las siguientes) confirmen el tamaño de la caja, podemos usar un relleno policristalino. Este polyfill viene en forma de un archivo HTC y es desarrollado por Christian Schaefer. Descargue el archivo del repositorio de Github y colóquelo, por ejemplo, en su carpeta CSS.

Cree una hoja de estilos CSS, dedicada para Internet Explorer. Agregue el enlace en el documento HTML de esta forma para que solo se sirva en IE7.

Luego ponga el siguiente código en ie.css . Esta regla de CSS a continuación aplicará box-sizing de box-sizing para todos los elementos.

 * {comportamiento: url (css / boxsizing.htc); } 

Algunas cosas a tener en cuenta al aplicar este truco:

La ruta url de boxsizing.htc debe ser relativa a la ubicación de los archivos HTML; de lo contrario, no funcionará.

Paul Irish también tiene un consejo para aplicar box-sizing en pseudo-elemento con *:before, *:after . Pero, dado que tanto IE7 como IE6 no son compatibles con pseudo-elemento, no hay ninguna razón para usar selectores de pseudo-elemento en este caso. Y como puede ver arriba, tampoco los incluimos en el código.

El resultado

Aquí, tenemos dos columnas con el ancho del contenedor principal establecido en 500 px. El ancho de la columna se establece en 50%, por lo que cada columna debe tener un ancho de 250 píxeles, aunque también establecemos el relleno para ello. Vamos a abrir Internet Explorer 7 e iniciar Developer Tool (F12).

Vaya a la pestaña Diseño de Developer Tool para ver el tamaño de la columna en detalle. Debería ver que en IE7 la columna ahora incluye relleno y bordes como parte del tamaño total. En nuestro caso, el ancho de la caja permanece en 250px.

Impresionante arte de hojas por Lorenzo Manuel Durán

Lorenzo Manuel Durán es un artista autodidacta de España que comenzó con pinturas al óleo sobre lienzo. ¡Un día se inspiró en una oruga devoradora de hojas para cambiarse a lienzos de hojas ! Los ensayos iniciales terminaron con muchas hojas "heridas" que terminaron en la basura, pero después de un tiempo, Lorenzo pudo crear obras maestras frondosas a nivel quirúrgico con solo herramientas dentales, un bisturí y sus manos (descubre más sobre el proceso que usos aquí).Lorenzo ha

(Consejos de tecnología y diseño)

10 funciones ocultas que puedes encontrar en Android Developer Options

¿Notaste que tu dispositivo Android tiene una función de "opciones de desarrollador" escondida en algún lugar? Hay muchas cosas que puede hacer en su Android, pero hay más que puede hacer cuando tiene habilitada esta opción . Desde acelerar tu dispositivo apagando las animaciones hasta obtener un renderizado de mayor calidad para un buen juego, hay muchas funciones que puedes habilitar desde la sección de Opciones de desarrollo de Android .Tenga

(Consejos de tecnología y diseño)