He notado un pequeño problema de alineación en los tres navegadores principales al renderizar mi sitio web. Como tal, ¿cómo puedo realizar el siguiente pseudocódigo con CSS puro?verificación de CSS para Chrome, IE, Firefox
if Webkit (Safari/Chrome) {
#myDIV {margin-top:-3px}
} else if (Firefox) {
#myDIV {margin-top:0px}
} else { // IE and other browsers
#myDIV {margin-top:1px}
}
Puede utilizar un CSS Hack.
Sin embargo, no lo recomendaría.
Para IE, puede incluir un archivo separado CSS o <style> etiqueta dentro de un conditional comment, así:
<!--[if IE] <tag> <![endif]-->
Si su sólo una propiedad, usted no necesita comentarios condicionales para la inclusión de otros archivos. Pero si lo quiere de esa manera, hágalo como SLaks ya escribió. Otro enfoque es simplemente agregar una propiedad al final de su clase específica con un hack específico del navegador.
.foo {
margin-top: 5px; // general property
_margin-top: 2px; //IE 6 and below
}
O usted separa sus clases y agrega a su clase general una clase específica para el navegador.
/* general */
foo {
width : 20em;
}
/* IE 6 */
* html foo {
width : 27em;
}
/* IE 7 */
* + html foo {
width : 29em;
}
Realmente no se puede hacer esto con CSS puro. La mejor forma de hacerlo sería usar un código del lado del servidor como ASP.NET o PHP para leer el encabezado "user-agent" de la solicitud HTTP y determinar qué navegador usan sus visitantes buscando palabras clave en esa cadena. Por ejemplo, mi agente de usuario es:
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3
Lo que podría hacer es tener una colección de si-else en busca de cadenas en el agente de usuario como "Firefox" o "MSIE" o "WebKit" , y luego sirva diferentes archivos CSS individuales dependiendo de qué navegador se esté utilizando.
que podría hacer lo mismo con JavaScript, pero recuerda que los usuarios pueden tener JavaScript desactivado, o más probablemente su dispositivo no sea compatible con él ... mientras que prácticamente cualquier solicitud HTTP enviará una cadena de agente de usuario.
¿Por qué harías esto? Normalmente, tiene un archivo CSS base, y luego con HTML condicional, javascript o código del lado del servidor, condicionalmente incluye el archivo CSS específico del navegador apropiado, como ff3.css o ie6.css. –
Entonces, ¿cuál es el HTML condicional para realizar lo siguiente? Mi requisito es, literalmente, simplemente cambiar la cantidad única de margen superior en un solo div – hankh
¿Por qué no nos dicen el problema real? ¿Cuál es el problema de alineación? – reisio