如何为 Internet Explorer 定义或创建样式表
主题:HTML / CSS
答案:使用 IE 条件样式表
如果您是一名网页设计师,您在处理 IE 错误时可能会有糟糕的经历。 大多数时候您无法摆脱它,可能是因为项目要求或您的客户仍在使用旧版本的 Internet Explorer (IE)。 所以让我们来处理它。
每个版本的 IE 的行为都与其他版本有所不同。 所以我们在这里所做的是为不同版本的 IE 浏览器定义单独的样式表,以查明特定版本中的确切问题。
假设您为某些元素定义的 CSS 属性在 IE 中无法正常工作,但在 Firefox 或 Chrome 等其他浏览器中却可以正常工作。 所以基本上我们所做的就是定义一个只针对 IE 浏览器的样式表,然后我们要么调整该属性的值,要么在这个样式表中添加一些新属性来解决这个问题。 这是一个例子:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>仅 IE 样式表</title>
<link rel="stylesheet" href="css/default.css">
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->
</head>
<body>
<h1>为 IE 定义样式表</h1>
<p>如果您在 IE 中打开此页面,输出将有所不同。</p>
</body>
</html>
条件样式表的开始和结束标记只是常规的HTML 注释
。 在括号之间放置条件语句,其含义如下。
- "IF"和"IE"的含义相当明显。
!
代表"非",所以 !IE 表示"非 IE"。gt
代表"大于"。gte
代表"大于或等于"。lt
表示"小于"。lte
表示"小于或等于"。
仅 IE 样式表
条件语句可能是创建仅 IE 样式表以修复 IE 错误的最常用方法,尤其是在旧版本中。 以下部分总结了针对不同版本 Internet Explorer 浏览器的语法。
针对所有版本的 IE
示例
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie-only.css">
<![endif]-->
针对除 IE 以外的所有浏览器
示例
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="css/all-except-ie.css">
<![endif]-->
仅针对 IE9 版本
示例
<!--[if IE 9]>
<link rel="stylesheet" href="css/ie9.css">
<![endif]-->
针对 IE9 及更高版本
示例
<!--[if gte IE 9]>
<link rel="stylesheet" href="css/ie9-and-higher.css">
<![endif]-->
同样,您可以为其他版本的 Internet Explorer 定义样式表。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答: