CSS 仅在 IE 上应用样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11173106/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply style ONLY on IE
提问by FastTrack
Here is my block of CSS:
这是我的 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;
}
I only want IE 7, 8, and 9 to "see" width: 100%
我只希望 IE 7、8 和 9 能够“看到” width: 100%
What is the simplest way to accomplish this?
实现这一目标的最简单方法是什么？
采纳答案by James Allardice
Update 2017
2017 年更新
Depending on the environment, conditional comments have been officially deprecated and removedin IE10+.
根据环境，条件注释已在 IE10+ 中正式弃用和删除。
Original
原来的
The simplest way is probably to use an Internet Explorer conditional commentin your HTML:
最简单的方法可能是在 HTML 中使用Internet Explorer 条件注释：
<!--[if IE]>
<style>
.actual-form table {
width: 100%;
}
</style>
<![endif]-->
There are numerous hacks (e.g. the underscore hack) you can use that will allow you to target only IE within your stylesheet, but it gets very messy if you want to target all versions of IE on all platforms.
您可以使用许多技巧（例如下划线技巧），它们将允许您在样式表中仅针对 IE，但是如果您想针对所有平台上的所有版本的 IE，这将变得非常混乱。
回答by Himanshu Dwivedi
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#myElement {
/* Enter your style code */
}
}
Explanation: It is a Microsoft-specific media query. Using -ms-high-contrast property specific to Microsoft IE, it will only be parsed in Internet Explorer 10 or greater. I have used both the valid values of the media query, so it will be parsed by IE only, whether the user has high contrast enabled or not.
说明：这是 Microsoft 特定的媒体查询。使用特定于 Microsoft IE 的 -ms-high-contrast 属性，它只会在 Internet Explorer 10 或更高版本中解析。我已经使用了媒体查询的两个有效值，所以它只会被 IE 解析，无论用户是否启用了高对比度。
回答by Oriol
Apart from the IE conditional comments, this is an updated liston how to target IE6 to IE10.
除了 IE 条件注释，这是关于如何将 IE6 定位到 IE10的更新列表。
See specific CSS & JS hacks beyond 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; }
/* IE7, IE8 */
#veinte { color/*\**/: blue; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
/* IE8, IE9 */
#anotherone {color: blue<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->
/;} /* must go at the END of all rules */
/* IE9, IE10, IE11 */
@media screen and (min-width:0<!--[if IE]>
<style type="text/css">
/************ css for all IE browsers ****************/
</style>
<![endif]-->
) {
#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; }
}
回答by Santosh Khalse
There are severals hacks available for IE
有几种可用于IE 的hacks
Using conditional comments with stylesheet
在样式表中使用条件注释
<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->
Using conditional comments with head section css
将条件注释与头部部分 css 一起使用
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 {
selector { property:value; }
}
IE6,7
@media screen {
selector { property:value; }
}
IE8
@media .ie .actual-form table {
width: 100%
}
screen {
selector { property:value; }
}
IE6,7,8
@media <link rel="stylesheet" type="text/css" href="index.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
screen\,screen {
selector { property:value; }
}
IE9,10
@media screen and (min-width:0.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;
}
){
selector { property:value; }
}
Using conditional comments with HTML elements
对 HTML 元素使用条件注释
#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 */
}
Using media query
使用媒体查询
<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>
回答by frontendzzzguy
As well as a conditional comment could also use CSS Browser Selector http://rafael.adm.br/css_browser_selector/as this will allow you to target specific browsers. You can then set your CSS as
除了条件注释外，还可以使用 CSS 浏览器选择器http://rafael.adm.br/css_browser_selector/因为这将允许您定位特定浏览器。然后，您可以将 CSS 设置为
<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->
body.ie .actual-form table {
width: 100%
}
This will also allow you to target specific browsers within your main stylesheet without the need for conditional comments.
这也将允许您在主样式表中定位特定浏览器，而无需条件注释。
回答by elad silver
I think for best practice you should write IE conditional statement inside the <head>tag
that inside has a link to your special ie style sheet.
This HAS TO BEafter your custom css link so it overrides the latter,
I have a small site so i use the same ie css for all pages.
我认为为了最佳实践，您应该在<head>标签内编写 IE 条件语句，该标签内有指向您的特殊 ie 样式表的链接。这必须是您的自定义CSS链接后，所以它覆盖了后者，我有一个小网站，所以我使用相同的CSS，即所有页面。
this differs from james answer as i think(personal opinion because i work with a designer team and i dont want them to touch my html files and mess up something there) you should never include styles in your html file.
这与我认为的詹姆斯回答不同（个人意见，因为我与一个设计师团队合作，我不希望他们接触我的 html 文件并在那里弄乱一些东西）你不应该在你的 html 文件中包含样式。
回答by osouthgate
A bit late on this one but this worked perfectly for me when trying to hide the background for IE6 & 7
这个有点晚了，但是当我试图隐藏 IE6 和 7 的背景时，这对我来说非常有效
##代码##I got this hack via: http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/
我通过以下方式获得了这个黑客：http: //briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/
##代码##回答by Akash
Welcome BrowserDetect- an awesome function.
欢迎浏览器检测- 一个很棒的功能。
##代码##The ObjectBrowserDetectalso provides versioninfo so we can add specific classes - for ex. $('*').addClass('ie9');if (BrowserDetect.version == 9).
该ObjectBrowserDetect还提供version信息，以便我们可以添加特定的类-为前。$('*').addClass('ie9');如果(BrowserDetect.version == 9)。
Good Luck....
祝你好运....
回答by Pykler
It really depends on the IE versions ... I found this excellent resource that is up to date from IE6-10:
这真的取决于 IE 版本......我发现了这个来自 IE6-10 的最新资源：
CSS hack for Internet Explorer 6
It is called the Star HTML Hack and looks as follows:
- html .color {color: #F00;} This hack uses fully valid CSS.
CSS hack for Internet Explorer 7
It is called the Star Plus Hack.
*:first-child+html .color {color: #F00;} Or a shorter version:
*+html .color {color: #F00;} Like the star HTML hack, this uses valid CSS.
CSS hack for Internet Explorer 8
@media \0screen { .color {color: #F00;} } This hacks does not use valid CSS.
CSS hack for Internet Explorer 9
:root .color {color: #F00\9;} This hacks also does not use valid CSS.
Added 2013.02.04: Unfortunately IE10 understands this hack.
CSS hack for Internet Explorer 10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .color {color: #F00;} } This hacks also does not use valid CSS.
用于 Internet Explorer 6 的 CSS hack
它被称为 Star HTML Hack，如下所示：
- html .color {color: #F00;} 这个 hack 使用完全有效的 CSS。
用于 Internet Explorer 7 的 CSS hack
它被称为 Star Plus Hack。
*:first-child+html .color {color: #F00;} 或者更短的版本：
*+html .color {color: #F00;} 就像明星 HTML hack 一样，它使用有效的 CSS。
用于 Internet Explorer 8 的 CSS hack
@media \0screen { .color {color: #F00;} } 这个黑客不使用有效的 CSS。
用于 Internet Explorer 9 的 CSS hack
:root .color {color: #F00\9;} 这个 hacks 也没有使用有效的 CSS。
添加 2013.02.04：不幸的是 IE10 理解这个 hack。
用于 Internet Explorer 10 的 CSS hack
@media screen 和 (-ms-high-contrast: active), (-ms-high-contrast: none) { .color {color: #F00;} } 这个 hacks 也没有使用有效的 CSS。
