1.Esquema
Al depurar problemas de CSS, a menudo agrego un borde a un elemento específico para ver exactamente qué sucede con ese elemento y ayudar a determinar el origen del problema. Esto suele funcionar porque me brinda una visibilidad más específica del diseño. Pero si se trata de un elemento a nivel de bloque, algo podría salir mal: agregar un borde de 1 px a cualquier elemento a nivel de bloque probablemente afecte el diseño al hacer que el elemento sea 2 px más ancho.
La propiedad de contorno es un reemplazo perfecto porque representa el objeto sin afectar el flujo del documento. Sin embargo, IE6 e IE7 no admiten el atributo de esquema, por lo que no se puede utilizar para depurar en estos dos navegadores.
2. Heredar (valor)
Hay muchos ejemplos de esto en el desarrollo de CSS: al establecer ciertos estilos en un elemento específico para indicarle que "herede" todas las propiedades agregadas de su elemento principal, puede evitar una cantidad considerable de entrada de teclado.
Esto se puede lograr fácilmente configurando heredar. Esto puede resultar útil. Por ejemplo, al anular el atributo de fondo, suele haber mucho texto en el atributo (color, URL de la imagen, ubicación, etc.). Entonces, en lugar de reescribir estos valores, es posible que desee que el elemento en cuestión tenga la misma propiedad de fondo que su padre, y un valor heredado funcionará, obviamente ahorrando mucho tiempo de escritura en el teclado.
Desafortunadamente, los valores heredados no son compatibles con IE6 e IE7 (excepto las propiedades de dirección (dirección del texto) y visibilidad).
3. Celdas vacías
Este atributo solo se usa para tablas o elementos cuyo atributo "display" está establecido en "table-cell". Si agrega contenido dinámicamente a una tabla, puede encontrar una situación en la que el contenido de una determinada celda esté vacía y no desee que se oculten el borde, el color de fondo, la imagen de fondo, etc. de esta celda vacía.
El uso de "celdas vacías: ocultar" puede resolver este problema, lo que ocultará completamente las celdas donde puede ocurrir esta situación.
Internet Explorer no admite el atributo de celdas vacías.
4.Lado del título
Hablando del atributo de la tabla, este atributo se usa para declarar el título de la tabla que se muestra en la columna lateral de la tabla. Acepta cuatro valores: superior, inferior, izquierda y derecha. Internet Exporter no admite este atributo; el título de la tabla siempre aparecerá en la parte superior de la tabla en IE6 e IE7.
5. Incremento de contador/Reinicio de contador
Una lista ordenada (<ol>) es muy conveniente porque le ahorra la molestia de agregar números incrementales manualmente y le permite cambiar la secuencia de la lista sin cambiar los números.
CSS tiene las propiedades de contraincremento y contrarrestablecimiento, que le permiten generar automáticamente números incrementales en casi cualquier elemento HTML, similar a una lista ordenada.
Pero IE6, IE7 e incluso Safari (hasta la versión 3.x) no admiten estas propiedades. Por supuesto, IE6 tampoco admite el pseudoelemento :before.
6.Altura mínima
A veces, el diseño o la estructura de distribución de un sitio web requiere un área de contenido con una altura fija, de lo contrario se pierde cierto efecto visual. Esto podría deberse a un fondo degradado, una lista desplegable única o tal vez a un efecto de brillo genial que surge de Photoshop. Pero a veces, hay mucho contenido en la página, pero la página no se puede expandir como se esperaba.
En este momento, debe utilizar el atributo min-height, porque puede indicarle al navegador que represente la altura mínima en un elemento específico a nivel de bloque, independientemente de si la altura real del contenido alcanza esta altura mínima. Luego, si el contenido excede la altura mínima, el elemento se expandirá adecuadamente.
Lo único que hay que tener en cuenta sobre el uso de min-height es que no es compatible con IE6. Todos sabemos que IE6 está desapareciendo (lentamente), pero algunos clientes aún pueden exigir que sus sitios admitan el maldito navegador.
La buena noticia es que IE6 representa el valor de altura exactamente de la misma manera que otros navegadores representan "altura mínima", por lo que todo lo que necesita es un truco específico de IE6 o una hoja de estilo independiente para agregar una altura específica, el problema está resuelto.
IE6 también ignora el ancho mínimo, el alto máximo y el ancho máximo, pero el método anterior también es factible para estas propiedades.
7. : flotar
Técnicamente, :hover es sólo una pseudoclase, pero no es compatible con IE6 (IE7 e IE8 lo admiten). La pseudoclase :hover le permite agregar cualquier estilo de mouseover a un elemento. Esto es muy útil y evita (al menos hasta cierto punto) el uso de JavaScript.
Pero si su sitio web necesita ser totalmente compatible con IE6, especialmente en China, donde IE6 domina el cielo, entonces debe considerar cancelar el uso de esta pseudoclase, a menos que la etiqueta relevante tenga un atributo "href", como la etiqueta <a>. . Y si quieres conseguir este efecto, es posible que tengas que recurrir a javascript y estilos adicionales.
8.Pantalla
La visualización generalmente se establece en uno de estos tres valores: bloque, en línea y ninguno. "Gracias" a IE, rara vez se utilizan otros valores de Pantalla. Estos valores incluyen bloque en línea, tabla, tabla en línea y celda de tabla, etc. Estos atributos son muy útiles para resolver algunos problemas de diseño especiales.
Por lo tanto, aunque IE admite estas tres propiedades básicas de Display, básicamente no admite otras propiedades.
De hecho, el soporte de IE8 para atributos de visualización es bastante completo. Sin embargo, para el atributo inline-block, IE6/7 solo admite elementos que están en línea.
Para obtener más información sobre la compatibilidad con la pantalla en varios navegadores, consulte aquí: Nota de Shenfei
9. Clip
Esta es una propiedad CSS interesante que puede resultar útil en situaciones especiales. Puede combinarse con contenido impredecible generado dinámicamente. En pocas palabras, este atributo le permite especificar un área oculta en un elemento específico; también puede entenderse como, en un elemento absolutamente posicionado, el área de visualización del elemento se recorta de acuerdo con ciertas configuraciones y el contenido más allá de esta área quedará oculto.
Técnicamente hablando, el atributo clip es compatible con IE, pero solo admite sintaxis sin comas, como
div.recortado {
relleno: 20px;
ancho: 400px;
altura: 400 px;
clip: recto (20px 300px 200px 100px);
posición: absoluta;
}
El estilo anterior (los atributos entre paréntesis después de rect no están separados por comas) se puede ejecutar en la mayoría de los navegadores, pero es posible que no pase la validación de CSS porque las declaraciones no están separadas por comas.
10. :enfoque
Esta es otra pseudoclase que debe mencionarse aquí, porque todos los navegadores que no son IE admiten este atributo. La pseudoclase :focus le permite declarar un estilo especial que se aplica dinámicamente a un elemento de la página cuando se convierte en el foco del teclado (ratón). Esto es útil en elementos de formulario porque puede agregar un borde a un campo de entrada cuando está seleccionado.