( ! ) 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.0000361480{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.0000361480{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.0000361480{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