css - selectors - javascript get element by data attribute

IE8 css selector (14)

Para orientar los elementos solo en los navegadores IE que usaré

IE6:

* html #nav li ul { left: -39px !important; border: 1px solid red; }

IE7:

*+html #nav li ul { left: -39px! important; }

¿Alguien sabe cómo apuntar a IE8?

A la luz de la evolución del hilo, ver a continuación una respuesta más completa:

IE 6

* html .ie6 {property:value;}

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

*:first-child+html .ie7 {property:value;}

IE 6 y 7

@media screen/9 { .ie67 {property:value;} }

.ie67 { *property:value;}

.ie67 { #property:value;}

IE 6, 7 y 8

@media /0screen/,screen/9 { .ie678 {property:value;} }

IE 8

html>/**/body .ie8 {property:value;}

@media /0screen { .ie8 {property:value;} }

IE 8 solo modo estándar

.ie8 { property /*/**/: value/9 }

IE 8,9 y 10

@media screen/0 { .ie8910 {property:value;} }

Solo IE 9

@media screen and (min-width:0) and (min-resolution: .001dpcm) { // IE9 CSS .ie9{property:value;} }

IE 9 y superior

@media screen and (min-width:0) and (min-resolution: +72dpi) { // IE9+ CSS .ie9up{property:value;} }

IE 9 y 10

@media screen and (min-width:0) { .ie910{property:value;} }

Solo IE 10

_:-ms-lang(x), .ie10 { property:value/9; }

IE 10 y superior

_:-ms-lang(x), .ie10up { property:value; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up{property:value;} }

IE 11 (y superior ...)

_:-ms-fullscreen, :root .ie11up { property:value; }

Alternativas de Javascript

Modernizr

Modernizr se ejecuta rápidamente en la carga de la página para detectar características; luego crea un objeto JavaScript con los resultados y agrega clases al elemento html

Selección de agente de usuario

El Javascript:

var b = document.documentElement; b.setAttribute(''data-useragent'', navigator.userAgent); b.setAttribute(''data-platform'', navigator.platform ); b.className += ((!!(''ontouchstart'' in window) || !!(''onmsgesturechange'' in window))?'' touch'':'''');

Agrega (por ejemplo) lo siguiente al elemento html :

data-useragent=''Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'' data-platform=''Win32''

Permitir selectores de CSS muy orientados, por ejemplo:

html[data-useragent*=''Chrome/13.0''] .nav{ background:url(img/radial_grad.png) center bottom no-repeat; }

Nota

Si es posible, evite la orientación del navegador. Identifique y solucione cualquier problema que identifique. Admite mejora progresiva y degradación elegante . Con esto en mente, este es un escenario de "mundo ideal" que no siempre se puede obtener en un entorno de producción, por lo tanto, lo anterior debería ayudar a proporcionar algunas buenas opciones.

Atribución / lectura esencial

Basándose en la excelente respuesta de image72, en realidad podría tener selectores CSS avanzados como este:

     <body class="notIE">

para que en tu CSS puedas hacer esto:

.notIE .foo { color: blue; } /* Target all browsers except IE */ .IE9up .foo { color: green; } /* Taget IE equal or greater than 9 */ .IE8 .foo { color: orange; } /* Taget IE 8 only */ .IE7down .foo { color: red; } /* Target IE equal or less than 7 */ .IE8 .foo, .IE9 .foo { font-size: 1.2em; /* Target IE8 & IE9 only */ } .bar { background-color: gray; } /* Applies to all browsers, as usual */ /* Maybe show a message only to IE users? */ .notIE #betterBrowser { display: none; } /* Any browser except IE */ .IE #betterBrowser { display: block; } /* All versions of IE */

Esto es genial porque:

Es perfectamente compatible con los estándares (no hay hacks de CSS feos / peligrosos)
No es necesario tener hojas de estilo separadas
Puede orientar fácilmente cualquier versión de IE así como combinaciones complejas

De acuerdo, no es un hack de css, sino que, por frustración por no poder encontrar la forma de apuntar a ie8 desde css, y debido a la política de no tener, por ejemplo, archivos css específicos, tuve que seguir, que supongo que alguien más podría ser útil:

if (jQuery.browser.version==8.0) { $(results).css({ ''left'':''23px'', ''top'':''-253px'' }); }

Eche un vistazo a estos:

/* IE8 Standards-Mode Only */ .test { color /*/**/: blue/9 } /* All IE versions, including IE8 Standards Mode */ .test { color: blue/9 }

(Fuente: CSS de David Bloom hack para el modo de estándares IE8 )

En el mundo de ASP.NET, he tendido a utilizar la función BrowserCaps incorporada para escribir un conjunto de clases en la etiqueta del cuerpo que le permiten apuntar a cualquier combinación de navegador y plataforma.

Por lo tanto, en el procesamiento previo, ejecutaría algo así como este código (suponiendo que le dé a su etiqueta una identificación y la haga funcionar en el servidor):

HtmlGenericControl _body = (HtmlGenericControl)this.FindControl("pageBody"); _body.Attributes.Add("class", Request.Browser.Platform + " " + Request.Browser.Browser + Request.Browser.MajorVersion);

Este código le permite apuntar a un navegador específico en su CSS de esta manera:

.IE8 #nav ul li { .... } .IE7 #nav ul li { .... } .MacPPC.Firefox #nav ul li { .... }

Creamos una subclase de System.Web.UI.MasterPage y nos aseguramos de que todas nuestras páginas maestras hereden de nuestra página maestra especializada para que cada página obtenga estas clases de forma gratuita.

Si no está en un entorno ASP.NET, puede usar jQuery, que tiene un complemento de navegador que agrega dinámicamente nombres de clases similares en la carga de la página.

Este método tiene la ventaja de eliminar los comentarios condicionales de su marcado, y también de mantener sus estilos principales y los estilos específicos del navegador en aproximadamente el mismo lugar en sus archivos CSS. También significa que su CSS es más a prueba de futuro (ya que no se basa en errores que pueden ser corregidos) y ayuda a su código CSS a tener mucho más sentido ya que solo tiene que ver

.IE8 #container { .... }

En lugar de

* html #container { .... }

¡o peor!

Esta pregunta es antigua pero ...

Justo después de la etiqueta corporal de apertura ...

Justo antes de la etiqueta de cierre del cuerpo ..

CSS ...

#IE8Body #nav li ul {}

Puede hacer esto para todos los navegadores IE usando declaraciones condicionales, O dirigirse a TODOS los navegadores encapsulando todo el contenido en un div con el nombre del navegador + versión del lado del servidor

Estilo CSS solo para IE8:

.divLogRight{color:Blue; color:Red/9; *color:Blue;}

Solo IE8 será rojo.

primer azul: para todos los navegadores.

Rojo: IE6,7,8 solo

Segundo azul: solo IE6,7

Tan rojo = solo para IE8.

Para obtener un resumen muy completo de los pirateos del navegador (incluidos Internet Explorer (IE), Safari, Chrome, iPhone y Opera), visite este enlace: http://paulirish.com/2009/browser-specific-css-hacks/

Me doy cuenta de que esta es una pregunta antigua, pero fue el primer resultado en Google cuando realicé una búsqueda y creo que encontré una mejor solución que la sugerencia mejor clasificada y lo que OP decidió hacer.

#nav li ul:not(.stupidIE) { color:red }

Así que, técnicamente, esto es lo contrario de lo que OP quería, pero eso solo significa que primero tiene que aplicar la regla que desea para IE8 y luego aplicar esto para todo lo demás. Por supuesto, puede poner cualquier cosa dentro de () siempre que sea css válido que no seleccione nada. IE8 se ahoga en esta línea y no la aplica, pero con IEs anteriores (vale, solo revisé IE7, dejé de preocuparme por IE6), simplemente ignore: not () y aplique las declaraciones. Y, por supuesto, todos los demás navegadores (probé Safari 5, Opera 10.5, Firefox 3.6) aplican ese CSS como era de esperar.

Entonces, esta solución, supongo que como cualquier otra solución pura de CSS supondría que si los desarrolladores de IE agregan soporte para el selector: not, entonces también arreglarán las discrepancias que ocasionaban que se dirigiera a IE8.

No hay ningún hack selector para IE8. El mejor recurso para este problema es http://browserhacks.com/#ie

Si desea dirigirse a IE8 específico, debe hacer comentarios en html

o puedes usar hacks de atributos como:

/* IE6, IE7, IE8, but also IE9 in some cases :( */ #diecinueve { color: blue/9; } /* IE7, IE8 */ #veinte { color/*/**/: blue/9; } /* IE8, IE9 */ #anotherone {color: blue/0/;} /* must go at the END of all rules */

Para más información sobre este cheque: http://www.paulirish.com/2009/browser-specific-css-hacks/

No voy a entrar en un debate sobre si se debe usar este método, pero esto le permitirá establecer atributos específicos de css para IE8-9 solamente (nota: no es un selector, por lo que es un poco diferente de lo que preguntó):

Use ''/ 0 /'' después de cada declaración css, así que:

#nav li ul { left: -39px/0/ !important; }

Y para crear otra respuesta, puede hacer esto para asignar estilos diferentes a IE6, IE7 e IE8:

#nav li ul { *left: -7px !important; /* IE 7 (IE6 also uses this, so put it first) */ _left: -6px !important; /* IE 6 */ left: -8px/0/ !important; /* IE 8-9 */ }

fuente: http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

Tengo una solución que uso solo cuando tengo que hacerlo, después de construir mi html & css válido y que funciona en la mayoría de los navegadores, hago el hack ocasional con esta sorprendente pieza de JavaScript de Rafael Lima. http://rafael.adm.br/css_browser_selector/

Mantiene mi CSS y HTML válidos y limpios, sé que no es la solución ideal, usa javascript para arreglar los hacks, pero siempre que tu código esté lo más cerca posible (el IE tonto simplemente rompe las cosas a veces) y luego mueve algo unos px con javascript no es tan importante como algunas personas piensan. Además por razones de tiempo / costo, es una solución rápida y fácil.

/ 9 no funciona con font-family , en su lugar necesitaría usar " / 0 /! Important " como mencionó Chris anteriormente, por ejemplo:

p { font-family: Arial /0/ !important; }

puedes usar así Es mejor que

div.foo {color: inherit;} .ie7 div.foo {color: # ff8000; }

Actualización 2013: IE10 + ya no admite comentarios condicionales.

Respuesta original:

Algunas personas parecen estar confundidas porque esto no responde a la letra de la pregunta, solo al espíritu, así que para aclaración:

No hay tal cosa como un selector de navegador. Existen hacks que aprovechan los errores y fallas en los analizadores de CSS de los navegadores específicos, pero confiando en estos se están preparando para el fracaso. Hay una forma estándar y aceptada de tratar con esto:

Utilice los comentarios condicionales para orientar IE solamente.

Ejemplo:

¡Todo dentro de los dos <!--> será ignorado por todos los navegadores que no sean IE como un comentario, y las versiones de IE que sean inferiores a IE8 se saltearán. Solo IE8 y superior lo procesarán. Actualización de 2013: IE10 + también lo ignorará como comentario.