这是我的 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;
}
我只希望 IE 7、8 和 9 能够“看到”width: 100%
完成此任务的最简单方法是什么？
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#myElement {
/* Enter your style code */
}
}
说明：它是 Microsoft 特定的媒体查询。使用 Microsoft IE 特有的 -ms-high-contrast 属性，它只会在 Internet Explorer 10 或更高版本中被解析。我已经使用了媒体查询的两个有效值，所以它只会被 IE 解析，无论用户是否启用了高对比度。
2017 年更新
根据环境，条件注释已在 IE10+ 中正式弃用和删除。
原来的
最简单的方法可能是在您的 HTML中使用Internet Explorer 条件注释：
<!--[if IE]>
<style>
.actual-form table {
width: 100%;
}
</style>
<![endif]-->
您可以使用许多技巧（例如下划线技巧），让您在样式表中仅定位 IE，但如果您想针对所有平台上的所有版本的 IE，它会变得非常混乱。
除了 IE 条件注释，这是一个关于如何将 IE6 定位到 IE10的更新列表。
/***** 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, IE11 */
@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; }
}
有几个可用于IE的 hack
在样式表中使用条件注释
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->
使用带有头部 css 的条件注释
<!--[if IE]>
<style type="text/css">
/************ css for all IE browsers ****************/
</style>
<![endif]-->
对 HTML 元素使用条件注释
<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->
使用媒体查询
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; }
}
除了条件注释外，还可以使用 CSS 浏览器选择器http://rafael.adm.br/css_browser_selector/，因为这将允许您定位特定的浏览器。然后，您可以将 CSS 设置为
.ie .actual-form table {
width: 100%
}
这也将允许您在主样式表中定位特定浏览器，而无需条件注释。
我认为作为最佳实践，您应该在标签内编写 IE 条件语句，该<head>标签内有指向您的特殊 ie 样式表的链接。这必须在您的自定义css链接之后，因此它会覆盖后者，我有一个小站点，所以我对所有页面使用相同的即 css。
<link rel="stylesheet" type="text/css" href="index.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
这与我认为的詹姆斯回答不同（个人意见，因为我与设计师团队合作，我不希望他们触摸我的 html 文件并在那里搞砸一些东西）你永远不应该在你的 html 文件中包含样式。
这个有点晚了，但是当我试图隐藏 IE6 和 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;
}
我通过以下方式获得了这个技巧：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 */
}
<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>
BrowserDetectObject 还提供version信息，因此我们可以添加特定的类 - 例如。$('*').addClass('ie9');如果(BrowserDetect.version == 9).
祝你好运....
IE9+
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
// IE9+ CSS
.selector{
color: red;
}
}
IE 边缘 12+
@supports (-ms-ime-align: auto) {
.selector {
color: red;
}
}
这个适用于 Edge 和所有 IE
:-ms-lang(x), .selector { color: red; }
这真的取决于 IE 版本......我发现这个优秀的资源是 IE6-10 的最新版本：
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;} 这个黑客也没有使用有效的 CSS。
添加 2013.02.04：不幸的是 IE10 理解这个 hack。
用于 Internet Explorer 10 的 CSS hack
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .color {color: #F00;} } 这个黑客也没有使用有效的 CSS。
这是一个完整的无 Javascript、基于 CSS 的解决方案，可让您以 Internet Explorer 1-11 为目标！我下面的解决方案通过使用 将 IE1-7 从所有现代工作表中隐藏起来@import，为 IE1-7 提供干净的白色页面布局，然后使用三个简单的 CSS 媒体查询“hacks”在导入的工作表中隔离 IE8-11。它甚至会影响 Mac 上的 IE。并且不需要 IE 条件注释。
有了这个解决方案，您再也不必为 Internet Explorer 定制您的 Web 应用程序，并且可以在您的所有网站中使用最先进的 CSS 安全地前进。最重要的是，它不需要 JavaScript 就可以工作！！
这个怎么运作
首先创建三个 CSS 样式表：
第一个样式表“OldBrowsers”是一个基本元素“重置”样式表，它为所有新旧浏览器提供了一个简单的白色块级布局，您可以在其中为每个 Web 浏览器设置所有元素的样式。这允许 20 多年的网络浏览器及其元素都使用相同的 HTML 设计并且看起来很相似。IE1-11 也可以看到此表。在此工作表中添加仅设置元素样式所需的所有基本样式。第二张表“ModernBrowsers.css”是您可以安全地放置所有现代、尖端 CSS 的地方，这些 CSS 使用 HTML5 现代设计为元素设置样式，但控制布局等。IE1-7 不会看到此表。第三张表是导入表，“Import.css”，@import规则。这会隐藏您的现代样式表，使其不受包括 IE1-7 在内的各种旧浏览器的影响。IE1-11 将看到“Import.css”表，但 IE1-7 将看不到“ModernBrowsers.css”表，因为该@import规则。
<link media="screen" rel="stylesheet" type="text/css" href="OldBrowsers.css" />
<link media="screen" rel="stylesheet" type="text/css" href="Import.css" />
在您的“Import.css”表中添加此@import 规则，格式如下。此“ModernBrowsers.css”表将对 IE1-7 和下面列出的各种旧浏览器隐藏：
@import 'ModernBrowsers.css' all;
此导入工作表中的所有 CSS 将对 Internet Explorer 1-7 和各种旧版浏览器隐藏。IE1-7，以及大范围或更老的浏览器，不理解媒体类型“all”，也不理解@import上面显示的具体格式，所以将无法导入此表。许多旧浏览器（2001 年之前）无法识别此特定版本的导入。这些浏览器现在太老了，你只需要为它们提供一个干净的白色网页，里面有堆积的内容块。
添加到“OldBrowsers”的 CSS 允许您设置旧浏览器和 IE1-7 以使用您控制的普通样式。我个人在这张表中只添加了 HTML“重置”元素样式，并确保所有 HTML5 元素都有简单干净的设计。较新的浏览器将在“ModernBrowsers.css”样式表中层叠这些。
在“ModernBrowsers.css”中，您想要添加所有现代样式，但也有特殊的 CSS hack 以使用 CSS 媒体查询（以及所有正常的选择器和类）针对Internet Explorer 8-11 。只需将以下仅限 IE 的修复程序添加到您的现代样式表中，以针对这些最后的特定 IE 浏览器。将特定于这些旧 IE 浏览器的任何样式放入这些块中。
注意：请记住 HTML5 和大多数 CSS3 通常从 Internet Explorer 9 到 11 开始受支持。但是 IE8-11 甚至 Trident Edge 浏览器都存在错误、缺少元素支持和其他问题。但是您现在可以通过这种方式安全地定位这些较旧的 IE 8-11 浏览器，同时在此表中使用您最先进的 CSS 来支持所有其他现代浏览器：
/* IE8 */
@media \0screen {
body {
background: red !important;
}
}
/* IE9 */
@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
body {
background: blue !important;
}
}
/* IE10-11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background: green !important;
}
}
简单的！您现在已针对 IE1-11（所有 Internet Explorer 浏览器！）
使用此解决方案，您可以实现以下目标：
完全从您的@import现代风格中排除 IE 1-7！这些代理以及下面的列表将永远不会看到您导入的现代样式并获得干净的白色样式表内容页面，旧浏览器仍然可以在查看您的内容时使用（使用“OldBrowsers.css”来设置样式）。使用上述@import规则将以下浏览器从“ModernBrowsers.css”中排除：
在您的“ModernBrowsers”导入表中，您现在可以使用简单的媒体查询“hacks”安全地定位 IE 浏览器版本 8-11。
该系统使用一个简单的@import样式表系统，该系统使用传统的、不支持外部样式规则而不是散布在多个表单中的 CSS 修复，快速且易于管理。（顺便说一句......不要听任何人说@import慢，因为它不是。我的导入表有一行，大小可能是一千字节或更小！@import自万维网诞生以来就一直在使用，与简单的 CSS 链接。与今天的 Javascript 孩子们使用这些新的“现代”ECMAScript SPA API 进入浏览器的兆字节相比，只是为了显示一小段新闻！）@import一行现在将多年和多年的 IE 浏览器版本与您的新版本分开CSS 代码和精美的布局设计。无需编写脚本！
所有旧的 IE 浏览器和广泛的其他用户代理现在使用这种导入策略被排除在现代样式之外，这允许这些旧浏览器折叠回完全可访问的纯“块级”白页和堆叠内容布局由较旧的浏览器。您现在可以花费最少的时间为旧浏览器自定义内容，而让他们看到您网站中数千个页面的纯白色堆叠内容页面！
请注意，此解决方案没有 IE 条件注释！你不应该使用那些，因为 IE 10-11 不再支持 IE 条件。
有了这个解决方案，您的现代网页设计现在可以 100% 自由地使用自定义的尖端 CSS3 技术，而不必再担心旧的浏览器和 IE1-11！
链接 CSS 有非常广泛的支持，即使在 1995 年以前的旧 CSS1 浏览器中也是如此。这只是不使用嵌入或“样式”元素样式的另一个原因。改为使用这些链接的 CSS 设计。
如果您在“OldBrowsers”样式表中添加了一组非常好的“重置”或元素样式，那么 20 多年的新旧浏览器及其基本元素设计将使您的核心网页设计看起来与使用该表单相同. “重置”元素 CSS 的想法是强制所有浏览器通过历史记录，以及它们共享的 HTML 元素支持，在应用 CSS 布局、脚本和更高级的 CSS 设计之前看起来相同。在过去的 25 年中，HTML 基本元素几乎没有变化。因此，首先对元素进行样式设置以简化文本内容显示是有意义的。
这是 2021 年新的“渐进式”CSS 的一部分，100% 无 JavaScript，设计概念用于解决跨浏览器样式问题，允许旧代理优雅地降级为更简单的布局，而不是努力解决神秘的旧问题，破碎的盒模型代理 (IE5-6) 以零碎的方式匹配复杂的 CSS 布局。大多数较旧的 Web 浏览器不再需要重新创建您的自定义布局。他们只需要显示基本的文本和媒体内容。随着他们在网上缓慢消亡的长尾，IE 1-11 只需要简单的布局设计，以便内容可读和可访问。
这种策略的优势是它 100% 无 Javascript！无论如何，你不应该在 2021 年使用脚本来管理Web 浏览器中的CSS。我建议您在 Web 浏览器中管理 Internet Explorer 时转储 Modernizr 和所有“polyfills”并尝试我的干净 CSS 解决方案。我的解决方案在针对 IE1-11 时非常有效，让您可以完全控制如何为这些目标浏览器自定义 CSS，同时让您作为设计师可以专注于更新的 CSS3 以及 Edge 和所有其他现代 HTML5 中的尖端样式和布局浏览器向前发展。自 2004 年以来，我一直在使用此版本，但最近在 2021 年对其进行了更新。
It's my hope we stop creating these gigantic, multi-megabyte, CPU-hog, JavaScripted, polyfill nightmare scripted solutions for addressing what used to be solved years ago with a few lines of simple Cascading Style Sheet code. :)
对于 /* Internet Explorer 9+（单行）*/
_::selection, .selector { property:value\0; }
只有这个解决方案才能完美地为我工作。
<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->
body.ie .actual-form table {
width: 100%
}