CSS兼容处理

时间 2019-11-13

标签 css 兼容处理栏目 CSS 繁體版

原文原文链接

CSS代码兼容主要由Hack和Filter两种方法来解决相关问题。css

Hack：一种兼容CSS在不一样浏览器中正确显示的方法。html

Filter：一种特殊的浏览器或浏览器组显示或隐藏规则或声明的方法。web

注意：浏览器

Hack是一种非官方技术，主要依赖各类字符组合，以及规则和声明的重复定义实如今不一样浏览器之间达到相同的效果。框架

可是Hack也有反作用，如下降代码的可读性，增长了代码的负担。工具

设计CSS Hack 和 Filter一般有两种方法：ui

利用浏览器自身的Bug，来隐藏或显示样式或声明。
利用浏览器对CSS支持的不完善，如对某些规则或语法尚未造成支持，来隐藏或显示样式。

通常建议使用第二种方法来实现浏览器的兼容。spa

最新最权威的CSS Filter技术汇总：http://www.communis.co.uk/dithered/css_filters/css_only/index.html操作系统

显示模式：各大浏览器厂商为了实现对标准网页和传统网页的兼容性，分别为浏览器制定了几套网页显示方案。设计

微软从IE6.0以上版本浏览器嵌入了两种显示方案分别是：Standards Mode（标准模式）和 Quirks Mode（怪异模式）。

标准模式：浏览器根据W3C组织制定的标准网页规范来显示页面。

怪异模式：页面将以IE5显示页面的方式来呈现网页，以保证与过去非标准网页的兼容性。

它们最大的区别是对盒模型解析的差别。

Firefox从1.0以上版本开始支持3种显示模式：Quirks Mode、Almost Standards Mode (几乎标准模式)和Standards Mode。

其中Almost Standards Mode对应于IE和Opera的Standards Mode，该模式除了在处理表格方式方面有一些细微的差别以外，与标准模式基本相同。

火狐的显示模型细节差别能够参考：http://www.mozilla.org/docs/web-developer/quirks/doctypes.html

Opera从6.0版本开始支持与IE相同的显示模式：Quirks Mode 和 Standards Mode,关于显示模式的细节说明能够参考：http://www.opera.com/doc/specs/doctype/。

相关文档类型，根据文档类型进行显示：

HTML4.0过滤型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

网页将遵循W3C制定的标准进行解析。

HTML4.0严格型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

HTML4.0框架型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">

以及XHML1.0过渡型、XHTML1.0严格型、XHTML框架型3个文档类型，但若是不给网页定义文档类型，IE浏览器会以怪异模式显示网页。

没有提供文档类型的版本：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML//EN" "http://www.w3.org/TR/html/loose.dtd">

HTML2.0版本：

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML2.0//EN">

HTML3.0版本：

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML3.0//EN">

HTML3.2版本：

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML3.2Final//EN">

注意：本示例仅在IE6.0以上版本浏览器有效，其余浏览器不支持此示例的显示差别。

条件过滤样式：

语法：

详解说明：

条件修饰关键字：

lte：小于或等于某个版本的IE浏览器。

lt：小于某个版本的IE浏览器。

gte：大于或等于某个版本的浏览器。

gt：大于某个版本的IE浏览器。

!：不等于某个版本的IE浏览器。

相关示例：

<!--[if IE5.0]>

<![endif]-->

<!--[if IE5]>

<![endif]-->

<!--[if IE6]>

<![endif]-->

<!--[if it IE6]>

<h1>IE6以及IE6如下版本能够识别</h1>

<![endif]-->

<!--[if IE5.5000]>

<![endif]-->

<!--[if gte IE6]>

<h1>IE6及以上版本能够识别</h1>

<![endif]-->

<!--[if IE7]>

<![endif]-->

<!--[if it IE7]>

<h1>IE7以及IE7如下版本能够识别</h1>

<![endif]-->

<!--[if gte IE7]>

<h1>IE7以及IE7以上版本能够识别</h1>

<![endif]-->

若是为某个版本的IE浏览器定义样式，则能够把样式放置在IE条件语句中。

例如：

<!--[if IE6]>

body {

background：#00FFFF;

}

</style>

<![endif]-->

同时还能够为不一样版本浏览器定义不一样的外部样式表，再用IE条件语句为不一样版本的IE浏览器导入不一样的文件，从而实现浏览器的兼容性处理。

如：

<!--[if IE6]>

<![endif]-->

<!--[if IE7>

<![endif]-->

提示：利用IE条件语句能够设计专门为非IE浏览器使用的条件语句（请注意其特殊写法）。

<!--[if ！IE]>

<h1>除IE外均可识别</h1>

<![endif]-->

选择器过滤样式：

使用!important提高优先级：IE6以及如下版本的浏览器没法识别，IE7没法使用这种方法。
使用下划线属性名：在IE7中被视为自定义属性，在CSS中没法识别并应用在IE7以上浏览器。IE6及如下版本能够识别。
使用*html选择符：在IE7浏览器中被忽略，专用于IE6及如下版本浏览器。

在标准网页中，html元素被认为根元素，其余元素都被包括其中。可是在IE6及如下版本的浏览器中默认一个匿名根元素，html元素被认为是它的子元素。

过滤声明：

隐藏单个声明：

IE6环境，如：

div {

width：200px;

width/**/：400px;

}

注意，注释的位置是在属性的后面，冒号的前面，且与属性名中间隔一个空格。

IE5.5环境，如：

div {

width：200px;

width： /**/400px;

}

注意，注释的位置是在冒号的后面，且与冒号中间隔一个空格。

IE5环境，如：

div {

width：200px;

width/* */：400px;

}

注意，注释的位置是在属性名的后面，冒号的前面，且注释中间隔一个空格。这个过滤器同时会适应Mac系统中的IE5和IE4。

如：

div {

width：200px;

width/**/：400px;

}

它不只适用上面系统中的IE版本，也适用IE5.2/OS操做系统的浏览器版本。

隐藏多个声明：

利用voice-family属性设计兼容IE5.5及更低版本浏览器的声明。

如：

div,content {

height：400px;

width：400px;

border：solid 1px blue;

voice-family："\"}"\";

voice-family：inherit;

height：200px;

width：200px;

border：solid 1px red;

}

注意：

voice-family属性能够指定网页内容用哪一种声音进行朗读，适用于盲人阅读器等设备上。

IE5.5及更低版本浏览器中因为不可以识别，同时错误解析转义字符，并认为到voice-family："\"}"\";这句结束。

其余浏览器中显示为200像素的红色框。

使用推荐过滤器：

IE6及更低版本专用：

*html #Element {

color：red;

...

}

IE7版本专用：

*+html #Element {

color：red;

...

}

IE7+及符合现代标准浏览器专用：

div>#Element {

color：red;

...

}

非IE现代标准浏览器专用：

html>/**/body #Element {

color：red;

...

}

\9：选择IE6+

\0：选择IE8+和Opera15如下的浏览器

如：

.test { color: #090\9; /* For IE8+ */ *color: #f00; /* For IE7 and earlier */ _color: #ff0; /* For IE6 and earlier */ }

使用检测工具：

W3C CSS验证服务：http://jigsaw.w3.org/css-validator/

Web Developer工具下载地址：http://chrispederick.com/work/webdeveloper。