-
Cómo arreglar la caja CSS en IE
-
En el diseño de un sitio web sencillo, el lenguaje de marcado de hipertexto o HTML y hojas de estilo en cascada, también conocido como CSS, se utilizan para crear un diseño. La combinación de estos dos elementos crea cajas, que el World Wide Web Consortium llama el modelo de caja. Mientras que el modelo de caja funciona bien en la mayoría de los navegadores, Internet Explorer, o IE, tiene algunos problemas. Si bien el diseño de un sitio web con CSS usted podría encontrarse con algunas peculiaridades en el IE. Hay varias soluciones para evitar estos problemas extraños.Instrucciones
1 Añadir "word-wrap: break-palabra;" a cada div. Cuando usted tiene una línea de texto que es demasiado largo para su div, se divide automáticamente en varias líneas por la mayoría de los navegadores. Sin embargo, IE no se rompe el texto de forma automática, haciendo que el div se estire. El comando word-wrap obligará IE para romper la palabra para usted, colocándolo en varias líneas y mantener su div la anchura deseada. En la acción, la CSS aparece así:
<Style>
caja{
background-color: #000;Anchura: 500px;
word-wrap: break-palabra;
}
</ Style>
2 Agregue el siguiente tipo de documento a su página:
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Coloca este código en la parte superior del documento HTML, antes de la etiqueta <html>. Esto ajusta el relleno para la página general en los navegadores antes de IE 8. Sin ella, el tamaño de su divs no será exactamente igual que las plantes, lo que puede desequilibrar sus cajas.
3 Agregue el código CSS "overflow: hidden;" a cada uno de sus divs caja. Este código funciona como el "word-wrap: break-palabra;" código, sólo que esta funciona para las imágenes también. Este código no es lo ideal, ya que por diseño se recortará el texto y las imágenes que son más anchos que sus cajas, sin embargo, mantiene estas imágenes sin escrúpulos y las largas líneas de texto de la fractura de su diseño. Al implementar este código, el CSS se verá algo como esto:
<Style>
caja{
background-color: #000;Anchura: 500px;
sobrecarga oculta;
}
</ Style>
Consejos y advertencias
- Se puede utilizar tanto la palabra-wrap y los códigos de desbordamiento al mismo tiempo.
