( ! ) Warning: include(): http:// wrapper is disabled in the server configuration by allow_url_include=0 in D:\www\up\html\html01.php on line 14
Call Stack
#TimeMemoryFunctionLocation
10.0000360184{main}( )...\html01.php:0
( ! ) Warning: include(http://pub.houheaven.com/Nav02/Nav_deep2.htm): failed to open stream: no suitable wrapper could be found in D:\www\up\html\html01.php on line 14
Call Stack
#TimeMemoryFunctionLocation
10.0000360184{main}( )...\html01.php:0
( ! ) Warning: include(): Failed opening 'http://pub.houheaven.com/Nav02/Nav_deep2.htm' for inclusion (include_path='.;C:\php\pear') in D:\www\up\html\html01.php on line 14
Call Stack
#TimeMemoryFunctionLocation
10.0000360184{main}( )...\html01.php:0

信息：原创2012-09-090 次阅读0 个评论

标签：后天堂向上，网站制作，自学教程，网站技术，网站兼容，html，html兼容

原理

W3C制定了CSS标准，CSS1、CSS2、CSS3，由于种种原因，并不是所有浏览器都良好的支持这个标准。

IE 浏览器早期版本的 Bug 多的能贴满你一张脸，比如，你做好的一个 CSS 导航菜单在 IE9 中可用，可在 IE6 上因为浏览器对 CSS 某些属性不支持会导致布局全乱了，或者 IE6 对固定定位（fixed）的不支持等等，这些岂止让你脑袋大，但因 IE 是全球使用最多的浏览器之一，作为网站制作者就不能忽略它。

这个浏览器兼容方法只适合 IE 浏览器，对其他浏览器没有任何作用和任何影响，看看下面的解释你就明白了。

当浏览器解析 HTML 时，如果遇到页面注释 <!-- -->，浏览器就会自动忽视这一段内容，IE 就是一个不走寻常路的浏览器，它根据这种注释语法创造出了自己的兼容方法 <!--[if IE x]><![endif]-->，当 IE 解析页面时遇到自己这种格式的写法时，这里面的内容仍然生效，并根据简单的条件判断（浏览器版本），做出相应的处理，但是，其他的浏览器会依然把这种写法当做注释进行忽略。


如何使用

语法：分为三个部分，语法开始、兼容代码、语法结束，语法开始中包含了对浏览器及其版本的判断，兼容代码就是你对页面错误做出的修复代码，语法结束标志着整个兼容方法的结束，为了页面代码的工整美观，可以将语法开始和结束单独写一行。

判断关键字：

关键字说明
lte小于或等于某个版本的IE浏览器
lt小于某个版本的IE浏览器
gte大于或等于某个版本的IE浏览器
gt小于某个版本的IE浏览器
!不等于某个版本的IE浏览器

具体应用：

应用写法
兼容所有 IE<!--[if IE]> your code <![endif]-->
兼容 IE6<!--[if IE 6]> your code <![endif]-->
兼容 IE7<!--[if IE 7]> your code <![endif]-->
兼容 IE8<!--[if IE 8]> your code <![endif]-->
兼容 IE9<!--[if IE 9]> your code <![endif]-->
兼容 IE10<!--[if IE 10]> your code <![endif]-->
兼容 IE8 以下版本<!--[if lt IE 8]> your code <![endif]-->
兼容 IE8 及其以下版本<!--[if lte IE 8]> your code <![endif]-->
兼容 IE8 以上版本<!--[if gt IE 8]> your code <![endif]-->
兼容 IE8 及其以上版本<!--[if gte IE 8]> your code <![endif]-->
兼容除了 IE6 的所有版本<!--[if ! IE 6]> your code <![endif]-->

实例演示

实例说明：当不同的浏览器打开同一网页时，网页文字颜色会不同。

现有文件：

demo.htm只有一行文字：hello world!
base.css适应所有浏览器的样式，文字颜色显示黑色
IE6.cssIE6 的样式，文字颜色显示红色
IEs.cssIE7 及其以上的样式，文字颜色显示绿色

网页代码：

<html>

<head>

<meta charset="utf-8" />

<title>demo</title>

<link rel="stylesheet" href="base.css" />

<!--[if IE 6]>

<link rel="stylesheet" href="IE6.css" />

<![endif]-->

<!--[if gte IE 7]>

<link rel="stylesheet" href="IEs.css" />

<![endif]-->

</head>

<body>

<p>hello world.</p>

</body>

</html>

样式代码：我觉得这个真的没有必要写了吧，每个文件一行就够了（color:#000）。


测试方法：按照正确语法，将所有样式表文件嵌入到网页中，然后使用 IE 测试软件（IETester）和其他浏览器（火狐、谷歌、苹果等）打开测试。


测试结果：

①. IE6 文字颜色是红色

②. IE7、IE8、IE9、IE10 都是绿色

③. 非 IE 内核的所有浏览器（火狐、谷歌、苹果等）文字颜色是黑色

显示框架
top