style - etiquetas css
Aplicar estilo SOLAMENTE en IE (11)
Bienvenido BrowserDetect - una función increíble.
<script>
var BrowserDetect;
BrowserDetect = {...};// get BrowserDetect Object from the link referenced in this answer
BrowserDetect.init();
// On page load, detect browser (with jQuery or vanilla)
if (BrowserDetect.browser === ''Explorer'') {
// Add ''ie'' class on every element on the page.
$(*).addClass(''ie'');
}
</script>
<!-- ENSURE IE STYLES ARE AVAILABLE -->
<style>
div.ie {
// do something special for div on IE browser.
}
h1.ie {
// do something special for h1 on IE browser.
}
</style>
Object BrowserDetect también proporciona información sobre la version para que podamos agregar clases específicas, por ej. $(''*'').addClass(''ie9''); if (BrowserDetect.version == 9) .
Buena suerte....
Aquí está mi bloque de CSS:
.actual-form table {
padding: 5px 0 15px 15px;
margin: 0 0 30px 0;
display: block;
width: 100%;
background: #f9f9f9;
border-top: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
}
Solo quiero IE 7, 8 y 9 para "ver" el width: 100%
¿Cuál es la forma más simple de lograr esto?
Además de los comentarios condicionales de IE, esta es una lista actualizada sobre cómo dirigir IE6 a IE10.
Vea los hacks de CSS y JS específicos más allá de IE .
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue/9; }
/* IE7, IE8 */
#veinte { color/*/**/: blue/9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone {color: blue/0/;} /* must go at the END of all rules */
/* IE9, IE10 */
@media screen and (min-width:0/0) {
#veintidos { color: red}
}
/***** Selector Hacks ******/
/* IE6 and below */
* html #uno { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Everything but IE6-8 */
:root *> #quince { color: red }
/* IE7 */
*+html #dieciocho { color: red }
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#veintiun { color: red; }
}
Además de un comentario condicional, también se puede usar el Selector de navegador CSS http://rafael.adm.br/css_browser_selector/ ya que esto le permitirá dirigirse a navegadores específicos. Luego puede configurar su CSS como
.ie .actual-form table {
width: 100%
}
Esto también le permitirá dirigirse a navegadores específicos dentro de su hoja de estilos principal sin la necesidad de comentarios condicionales.
Creo que para obtener la mejor práctica, debe escribir la declaración condicional de IE dentro de la etiqueta <head> que en su interior tiene un enlace a su hoja especial de estilos, por ejemplo. Esto TIENE QUE SER después de su enlace css personalizado por lo que anula el último, tengo un sitio pequeño, así que uso el mismo es decir, CSS para todas las páginas.
<link rel="stylesheet" type="text/css" href="index.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
esto difiere de la respuesta de James como creo (opinión personal porque trabajo con un equipo de diseñadores y no quiero que toquen mis archivos html y arruinen algo ahí) nunca debes incluir estilos en tu archivo html.
Hay varios hacks disponibles para IE
Usar comentarios condicionales con la hoja de estilo
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->
Usar comentarios condicionales con la sección de la cabeza css
<!--[if IE]>
<style type="text/css">
/************ css for all IE browsers ****************/
</style>
<![endif]-->
Uso de comentarios condicionales con elementos HTML
<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->
Usando la consulta de medios
IE10+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
selector { property:value; }
}
IE6,7,9,10
@media screen and (min-width: 640px), screen/9 {
selector { property:value; }
}
IE6,7
@media screen/9 {
selector { property:value; }
}
IE8
@media /0screen {
selector { property:value; }
}
IE6,7,8
@media /0screen/,screen/9 {
selector { property:value; }
}
IE9,10
@media screen and (min-width:0/0){
selector { property:value; }
}
Para / * Internet Explorer 9+ (one-liner) * /
_::selection, .selector { property:value/0; }
Solo esta solución funciona perfectamente para mí.
Realmente depende de las versiones de IE ... Encontré este excelente recurso actualizado de IE6-10 :
Hack de CSS para Internet Explorer 6
Se llama Star HTML Hack y se ve de la siguiente manera:
- html .color {color: # F00;} Este truco usa CSS completamente válido.
Hack de CSS para Internet Explorer 7
Se llama Star Plus Hack.
*: first-child + html .color {color: # F00;} O una versión más corta:
* + html .color {color: # F00;} Al igual que el hack HTML de estrellas, este usa CSS válido.
Hack de CSS para Internet Explorer 8
@media / 0screen {.color {color: # F00;}} Este hacks no usa CSS válido.
Hack de CSS para Internet Explorer 9
: root .color {color: # F00 / 9;} Este hacks tampoco usa CSS válido.
Agregado 2013.02.04: Desafortunadamente IE10 entiende este truco.
Hack de CSS para Internet Explorer 10
@media screen y (-ms-high-contrast: active), (-ms-high-contrast: none) {.color {color: # F00;}} Este hackeo tampoco usa CSS válido.
Un poco tarde en esto, pero esto funcionó perfectamente para mí cuando traté de ocultar el fondo de IE6 y 7
.myclass{
background-image: url("images/myimg.png");
background-position: right top;
background-repeat: no-repeat;
background-size: 22px auto;
padding-left: 48px;
height: 42px;
_background-image: none;
*background-image: none;
}
Obtuve este truco a través de: http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/
#myelement
{
color: #999; /* shows in all browsers */
*color: #999; /* notice the * before the property - shows in IE7 and below */
_color: #999; /* notice the _ before the property - shows in IE6 and below */
}
Actualización 2017
Según el entorno, los comentarios condicionales se han desaprobado oficialmente y se han eliminado en IE10 +.
Original
La forma más simple es, probablemente, utilizar un comentario condicional de Internet Explorer en su HTML:
<!--[if IE]>
<style>
.actual-form table {
width: 100%;
}
</style>
<![endif]-->
Existen numerosos hacks (por ejemplo, el hack de guión bajo ) que puede usar que le permitirán orientar solo IE dentro de su hoja de estilo, pero se vuelve muy complicado si desea apuntar todas las versiones de IE en todas las plataformas.
<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->
body.ie .actual-form table {
width: 100%
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#myElement {
/* Enter your style code */
}
}
Explicación: Es una consulta de medios específica de Microsoft. Con la propiedad -ms-high-contrast específica para Microsoft IE, solo se analizará en Internet Explorer 10 o superior. He utilizado ambos valores válidos de la consulta de medios, por lo que solo se analizará con IE, independientemente de si el usuario tiene alto contraste habilitado o no.