条件注释与 HTML 注释 ( <!-- -->
) 具有相同的语法,但它们仅适用于 Internet Explorer 浏览器 (IE)。尽管现在网络上不再使用该技术。
注释里面的内容只在IE 5-9上可用,其他浏览器会忽略。从 IE 10 开始,语法被禁用。
<!--[if IE]>Only IE sees this<![endif]-->
还可以添加一些约束来限制 IE 版本,例如:
<!--[if IE 8]>Only IE 8 sees this<![endif]-->
<!--[if gte IE 8]>Only IE 8 and higher versions see this<![endif]-->
<!--[if lte IE 8]>Only IE 8 and lower versions see this<![endif]-->
表示IE版本的特殊字符如下:
特点 | 描述 |
---|---|
gt |
大于 |
gte |
大于或等于 |
lt |
少于 |
lte |
小于或等于 |
可以为给定的 IE 版本应用样式或修复,例如:
<link href="styles.css" rel="stylesheet" />
<!--[if IE 8]>
<link href="fix-ie8.css" rel="stylesheet" />
<![endif]-->
<!--[if IE 9]>
<link href="fix-ie9.css" rel="stylesheet" />
<![endif]-->
styles.css
文件包含适用于现代浏览器的样式,而fix-ie8.css
和fix-ie9.css
文件分别提供适用于 IE 8 和 IE 9 的修复程序。
但如此,就会多一个 HTTP 请求。但是,可以通过对根元素使用条件注释来减少请求的数量html:
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
html
根据访问者当前使用的 IE 版本,根元素将有一个额外的 CSS 类。例如,IE 9 浏览器将添加ie9
CSS 类。这些样式现在合并为一个CSS文件:
<link href="all-styles.css" rel="stylesheet" />
它包含针对不同 IE 版本的修复:
.card {
background: rgba(0, 0, 0, 0.5);
}
/* Background with opacity is only available on IE 9 and later */
.ie6 .card,
.ie7 .card,
.ie8 .card {
background: #ccc;
}
HTTP 请求数问题已解决。但是,样式现在包含许多重复代码。我们可以通过向html
元素添加更多 CSS 类来解决此问题:
<!--[if lt IE 7]><html class="lt-ie7 lt-ie8 lt-ie9"><![endif]-->
<!--[if IE 7]><html class="lt-ie8 lt-ie9"><![endif]-->
<!--[if IE 8]><html class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
如此,IE 6、7、8 中 card
的附加样式现在可以合并到一个类声明中:
.lt-ie9 .card {
/* Styles for IEs before 9 */
}
除了 Internet Explorer (IE),其他浏览器会忽略条件注释。IE 10 也禁用了该标签。如何为其他浏览器和旧版本的 IE 添加额外的类?
可以根据用户代理检测浏览器及其版本。以下代码片段检查当前浏览器是否为 IE 11,并在需要时添加相应的 CSS 类:
function detectIE11() {
if (navigator.userAgent.match(/Trident.*rv:11\./)) {
document.documentElement.classList.add('ie11');
}
}
一旦ie11
将类添加到根html
元素,就可以为 IE 11 显式添加更多样式:文章来源:https://www.toymoban.com/news/detail-463824.html
.ie11 .otherClass {
/* Styles for IE 11 */
}
该方法不仅适用于 IE 11,还可以用于支持其他浏览器。 文章来源地址https://www.toymoban.com/news/detail-463824.html
到了这里,关于浏览器兼容性:条件注释的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!