La compatibilidad del navegador siempre ha sido un problema común en el diseño CSS y los principiantes han encontrado muchos malentendidos debido a esto. Por mi experiencia, he resumido dos métodos para evitar la mayoría de los problemas de compatibilidad del navegador.
Estos dos métodos tienen las siguientes ventajas:
1. No es necesario utilizar HACK
2. Sencillo y eficaz, puedes entenderlo de un vistazo.
3. Diseño jerárquico y modular.
4. El código es más razonable y más fácil de identificar.
Método 1: resuelva la desalineación flotante causada al agregar espacio interno y externo
Por lo general, necesitamos usar flotantes para flotar DIV en diseños de varias columnas. Por lo general, escribiremos 3 DIV para diseños de 3 columnas.
.gif)
Para lograr este efecto, agregaremos un margen para permitir que la columna se espacie directamente y también agregaremos un borde, además de relleno para evitar que el texto del interior se pegue al borde. Pero sucedió algo inesperado después de escribir el código, ocurrió la siguiente situación:
.gif)
La tercera columna estaba debajo. Este no es el efecto que deseas. Así que analicémoslo. Sigue la idea general. El ancho total es 800 px, 200 px para la columna de la izquierda, 400 px para la columna del medio y 200 px para la columna de la derecha. Esto se ve bien, pero debe haber un espacio entre estas columnas, por lo que debe cambiarlo: 190 px para la columna de la izquierda. columna izquierda, 400 px para la columna central y 190 px para la columna derecha. ¿Está bien?
Pero para que se vea mejor, agrega un borde. Pero olvidé que el borde también aumentará el ancho. Además, aumentó el relleno de la columna: 10px; estoy confundido, por lo que el ancho real se convierte en: columna izquierda: ancho 200-espaciado exterior 10-espaciado interior 20-borde. 2=168, para que no haya desalineación. ¿Pero no crees que esto es un poco complicado? Quizás necesites una calculadora. Habrá diferencias en la visualización de algunos navegadores con este diseño.
Bien, hablemos de mi método. Según la división jerárquica, separo el diseño y la visualización. El diseño significa que además del ancho y el flotador, el diseño agrega como máximo un espacio exterior, por lo que me resulta más fácil de calcular. Luego agregamos otro DIV a la columna de diseño específicamente para mostrar bordes, espaciado interno y externo, etc. No es necesario definir el ancho, simplemente adaptarlo. Para que te resulte más fácil recordarlo, improvisé un poema: el ancho fijo debe ser flotante, sin bordes ni parches, pon un DIV adentro y el estilo definido funcionará.
Método 2: resolver el problema de los elementos flotantes internos que se desprenden de la capa exterior
Para crear un catálogo de productos o un álbum de imágenes, utilizamos UL o N DIV para flotar. El efecto deseado es el siguiente:
.gif)
Pero recientemente resultó contraproducente, la pantalla se ve así y el borde exterior se ha movido hacia la parte superior:
.gif)
La solución a este problema es realmente muy sencilla.
1. Puedes agregar un float:left; a la capa exterior para resolver el problema.
2. Otro método es colocar un DIV al final para borrar el flotador una vez que finaliza el flotador.
3. Agregue alto o ancho a la capa exterior.