CSS对IE6、IE7、IE8适用详尽的易用的参照

日期:2020-10-27 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

依据这些让人遗憾的统计分析結果,在为顾客开发设计网站的情况下开发设计人员对全部当今应用的IE访问器做全面的检测是必要的,并且这样在本人新项目上也可

汉语原文:CSS在Internet Explorer 6, 7 和8中的区别
译自:CSS Differences in Internet Explorer 6, 7 and 8

有关访问器的最离奇的统计分析結果之1便是Internet Explorer 版本号6,7和8共存。截至本文,Internet Explorer各个版本号一共占有了大概65%的销售市场市场份额。在网站开发设计小区,这个数据要小许多,统计分析显示信息大约仅有40%

这些统计分析中较为趣味的一部分是,IE6、IE7、IE8之间的标值很贴近,这避免了单独Microsoft的访问器占居统治影响力——与以往的状况相反。依据这些让人遗憾的统计分析結果,在为顾客开发设计网站的情况下开发设计人员对全部当今应用的IE访问器做全面的检测是必要的,并且这样在本人新项目上还可以笼络更多的客户。

多谢那些JavaScript库(架构),跨访问器的Javascript的检测早已像当今情势所容许的那样贴近完善了。但在CSS开发设计中还并不是这样,非常是关联到IE现阶段存在的3个版本号。

本文尝试为期待掌握CSS对IE6、IE7、IE8的适用的不一样的开发设计者出示1份详尽的、易用的参照。本参照包括下列状况的简述和适配状况:

  • 3个访问器中的1个适用而此外两个不适用的条目
  • 3个访问器中的两个适用而此外1个不适用的条目

本文不探讨:

  • 3个访问器都不适用的条目
  • 独享特性

因而,本文的管理中心是3个访问器中的不一样,而并不是必要的适用缺点。该目录被分成下列5个一部分:

  • 挑选器与承继
  • 伪类与伪元素
  • 特性适用
  • 其它各种各样技术性
  • 关键bug和兼容问题难题

挑选器与承继

子挑选器

示例
body > p {
	color: #fff;
}
叙述

子挑选器挑选1个特殊父级元素的全部立即子级元素,在上面的事例中,body是父元素,p是子元素。

适用状况
IE6
No
IE7
Yes
IE8
Yes
Bugs

IE7中,假如在父级标识和子级标识之间有1个HTML注解,子挑选器将不容易工作中。

链类

示例
.class1.class2.class3 {
	background: #fff;
}
叙述

链类用于送1个HTML元素有好几个class申明的状况,就像这样:

<div class="class1 class2 class3">
<p>Content here.</p>
</div>
适用状况
IE6
No
IE7
Yes
IE8
Yes
Bugs

IE6仿佛适用这类状况,由于它能配对链中的最终1个class到应用该class的元素上,但是,它其实不能限定1个应用链中全部class的元素。

特性挑选器

示例
a[href] {
	color: #0f0;
}
叙述

该挑选器容许1个元素被精准定位要是它有特定的特性。在上面的事例中,全部的带有href特性的a标识都会被限制,而沒有href特性的a标识不容易被限制。

适用状况
IE6
No
IE7
Yes
IE8
Yes

邻近弟兄挑选器

示例
h1+p {
	color: #f00;
}
叙述

该挑选器精准定位邻近到特定元素的弟兄标识。上面的事例可能限制p标识,可是他务必是h1标识的弟兄并且要立即尾随在h1标识的后边。例如:

<h1>heading</h1>
<p>Content here.</p>
<p>Content here.</p>

在上面的编码中,CSS款式将只对第1个p合理。由于它是h1的弟兄并且紧跟随h1。第2个p也是h1的1个弟兄,可是它沒有紧跟随h1。

适用状况
IE6
No
IE7
Yes
IE8
Yes
Bugs

在IE7中,假如在弟兄之间有1个HTML注解,邻近弟兄挑选器将失效。

一般弟兄挑选器

示例
h1~p {
	color: #f00;
}
叙述

该挑选器精准定位1个特定元素后边的全部弟兄元素。将此挑选器运用到上面的那个事例,可能对两个p标识都合理。自然,假如有1个p元素出現在h1以前,那个p元素不容易被配对。

适用状况
IE6
No
IE7
Yes
IE8
Yes

伪类和伪元素

:hover后边的子孙后代挑选器

示例
a:hover span {
	color: #0f0;
}
叙述

1个元素能够被:hover伪类后边的挑选器精准定位,就像子孙后代挑选器1样。上面的事例,在电脑鼠标悬停的情况下,可能更改a元素内的span元素中的文本的色调。

适用状况
IE6
No
IE7
Yes
IE8
Yes

链伪类

示例
a:first-child:hover {
	color: #0f0;
}
叙述

伪类能够链起来以变小元素挑选。上面的事例会精准定位每个父级元素下的第1个a标识,并将hover伪类P运用到它上。

适用状况
IE6
No
IE7
Yes
IE8
Yes

非锚点元素中的:hover

示例
div:hover {
	color: #f00;
}
叙述

:hover伪类能够运用到任何元素的悬停情况,而不只是a标识。

适用状况
IE6
No
IE7
Yes
IE8
Yes

:first-child伪类

示例
div li:first-child {
	background: blue;
}
叙述

改伪类精准定位每个特定的元素的父级元素的第1个子元素。

适用状况
IE6
No
IE7
Yes
IE8
Yes
Bugs

IE7中,假如要精准定位的第1个子元素以前有HTML注解,first-child伪类可能失效。

:focus伪类

示例
a:focus {
	border: 1px solid red;
}
叙述

该伪类精准定位有电脑键盘聚焦点的全部元素。

适用状况
IE6
No
IE7
No
IE8
Yes

:before 和:after 伪类

示例
#box:before {
	content: "本段文本在盒子前面";
}
 
#box:after {
	content: "本段文本在盒子后边";
}
叙述

这两个伪元素各自在特定元素的前面和后边加上转化成的內容,融合content特性1起应用。

适用状况
IE6
No
IE7
No
IE8
Yes

特性适用

由position造成的具体尺寸

示例
#box {
	position: absolute;
	top: 0;
	right: 100px;
	left: 0;
	bottom: 200px;
	background: blue;
}
叙述

界定top, right, bottom, 和left 值到肯定精准定位的元素上把给这个元素具体的尺寸(宽度和高宽比),尽管并沒有设置使宽度和高宽比值。

适用状况
IE6
No
IE7
Yes
IE8
Yes

Min-Height 与 Min-Width

示例
#box {
	min-height: 500px;
	min-width: 300px;
}
叙述

这两个特性各自特定元素的宽和高的最少值,容许1个盒子能够比特定的最少值更大,可是不可以更小。它们两个能够1起应用,还可以分起来用。

适用状况
IE6
No
IE7
Yes
IE8
Yes

Max-Height 和Max-Width

示例
#box {
	max-height: 500px;
	max-width: 300px;
}
叙述

这两个特性各自特定元素的高和宽的最大值,容许1个盒子比这个特定的最大值小,可是不可以更大。它们还可以另外应用或独立应用。

适用状况
IE6
No
IE7
Yes
IE8
Yes

全透明边框色调

示例
#box {
	border: solid 1px transparent;
}
叙述

1个全透明的边框色容许1个边框和边框色可见(或不全透明)时占有1样的室内空间。

适用状况
IE6
No
IE7
Yes
IE8
Yes

固定不动部位元素

示例
#box {
	position: fixed;
}
叙述

position特性的这个值容许1个元素肯定的相对对话框精准定位。

适用状况
IE6
No
IE7
Yes
IE8
Yes

固定不动部位的情况图

示例
#box {
	background-image: url(images/bg.jpg);
	background-position: 0 0;
	background-attachment: fixed;
}
叙述

background-attachment特性的值为fixed容许1个情况照片肯定地相对对话框精准定位。

适用状况
IE6
No
IE7
Yes
IE8
Yes
Bugs

就像position:fixed1样,IE6一样不适用background-positon的fixed值 。但是,在IE6中仅有在这个值用于根元素的情况下才合理。

特性值“inherit”

示例
#box {
	display: inherit;
}
叙述

将值inherit 运用到1个特性那个容许1个元素从它的包括元素承继测算的值。

适用状况
IE6
No
IE7
No
IE8
Yes
Bugs

IE6 和IE7 不适用inherit 值除directionvisibility 特性。

报表模块的边框空白

示例
table td {
	border-spacing: 3px;
}
叙述

该特性设定邻近的报表模块的边框之间的空白。

适用状况
IE6
No
IE7
No
IE8
Yes

在报表中3D渲染空模块格

示例
table {
	empty-cells: show;
}
叙述

该特性,只运用于元素的display特性被设定为 table-cell的元素,容许空模块格3D渲染她们的边框和情况。不然,它们将不能见。

适用状况
IE6
No
IE7
No
IE8
Yes

报表题目的水平部位

示例
table {
	caption-side: bottom;
}
叙述

这个特性容许将1个报表的题目放到报表的底部——默认设置是头顶部。

适用状况
IE6
No
IE7
No
IE8
Yes

修剪地区

示例
#box {
	clip:rect(20px, 300px, 200px, 100px)
}
叙述

该特性特定1个盒子的1个地区可见,剩余的一部分修剪掉,或不能见。

适用状况
IE6
No
IE7
No
IE8
Yes
Bugs

趣味的是,该假如不应用分隔各个值的逗号,IE6和IE7还可以用这个特性。(例如,应用空格分隔裁切的值。)

复印网页页面中的orphanes和widows

示例
p {
	orphans: 4;
}
 
p {
	widows: 4;
}
叙述

orphans特性设置在复印网页页面底部显示信息的至少行数。而widows 特性用来设置复印网页页面头顶部最少显示信息的段落的行数。

适用状况
IE6
No
IE7
No
IE8
Yes

盒子内的网页页面切分

示例
#box {
	page-break-inside: avoid;
}
叙述

该特性设置分页查询是不是产生在1个特定元素内。

适用状况
IE6
No
IE7
No
IE8
Yes

Outline 特性

示例
#box {
	outline: solid 1px red;
}
叙述

outlineoutline-style, outline-width, 和outline-color的缩写。该特性要优于border特性,由于它不容易危害文本文档流,因此u更有助于调节合理布局难题。

适用状况
IE6
No
IE7
No
IE8
Yes

display特性的取代值

示例
#box {
	display: inline-block;
}
叙述

display 特性一般设定为block, inline, 或none。取代值包含:

  • inline-block
  • inline-table
  • list-item
  • run-in
  • table
  • table-caption
  • table-cell
  • table-column
  • table-column-group
  • table-footer-group
  • table-header-group
  • table-row
  • table-row-group
适用状况
IE6
No
IE7
No
IE8
Yes

解决可折叠空白

示例
p {
	white-space: pre-line;
}
 
div {
	white-space: pre-wrap;
}
叙述

white-space特性的pre-line值设置将好几个空白元素折叠为1个空白,另外容许确立的设定断行。white-space 特性的pre-wrap 值不容易将好几个空白折叠为1个,但是也容许确立的设定断行。

适用状况
IE6
No
IE7
No
IE8
Yes

其它各种各样技术性

@import的新闻媒体种类

示例
@import url("styles.css") screen;
叙述

就像上面的事例那样,引进的款式表文档的新闻媒体种类申明在文档详细地址的后边。在该事例中,新闻媒体种类是”screen”。

适用状况
IE6
No
IE7
No
IE8
Yes
Bugs

虽然IE6 和IE7 适用 @import,它们在新闻媒体种类被特定的情况下会失效,乃至会引发正@import标准失效。

计数递增

示例
h2 {
	counter-increment: headers;
}
h2:before {
	content: counter(headers) ". ";
}
叙述

该CSS 技术性容许你全自动提升出現在特定元素前面的序号,融合before伪元素1起应用。

适用状况
IE6
No
IE7
No
IE8
Yes

转化成內容的引入标识符

示例
q {
	quotes: "'" "'";
}
 
q:before {
	content: open-quote;
}
 
q:after {
	content: close-quote;
}
叙述

特定用于转化成內容的引入呼号,用于q标识。

适用状况
IE6
No
IE7
No
IE8
Yes

关键bug和兼容问题性难题

下面是在上文中沒有提到的IE6和IE7的诸多bug。自然这个目录不包含在这3个访问器中都不适用的条目。

IE6 Bugs

  • 不适用用款式设定<abbr> 元素
  • 不适用以连标识符和下划线开始的class和ID名
  • <select> 元素一直出現在层叠最上面,而疏忽z-index值
  • 假如锚点的伪类沒有应用正确的次序(:link, :visited, :hover),:hover 伪类将失效
  • 1个特性的!important 申明会被同1标准中同1特性的沒有应用!important的第2个申明遮盖。
  • height 主要表现相近于min-height
  • width 主要表现相近于min-width
  • 上下margin双倍
  • 圆点边框(dotted)看起来像虚线边框(dashed)
  • text-decorationline-through 值在文本上看起来比其他访问器要高1些
  • 井然有序目录假如有1个固定不动构造(haslayout为true,不可以设定li的高宽比/宽度/zoom等激活haslayout的值),编号就不容易提升,而是维持为1
  • 目录元素不适用list-style-type的全部能用的值
  • 假如目录条目波动,特定的list-style-image 将不容易显示信息
  • 不彻底适用 @font-face
  • 一些挑选器会不正确的配对注解和文本文档申明
  • 假如1个ID 挑选器融合1个类挑选器不配对,一样的ID挑选器融合不一样的类挑选器也将被作为不配对。

IE7 Bugs

  • 井然有序目录假如有1个固定不动构造(haslayout为true,不可以设定li的高宽比/宽度/zoom等激活haslayout的值),编号就不容易提升,而是维持为1
  • 目录元素不适用list-style-type的全部能用的值
  • 假如目录条目波动,特定的list-style-image 将不容易显示信息
  • 不彻底适用 @font-face
  • 一些挑选器会不正确的配对注解和文本文档申明

1些在这里沒有提到的IE bug只会在特殊自然环境产生,并且沒有特定到特殊的CSS特性或值。查询下面的参照以掌握更多难题:

更多資源

  • Details of Changes in Internet Explorer 8
  • CSS Compatibility for Internet Explorer (MSDN)
  • CSS Improvements in Internet Explorer 8 (MSDN)
  • Internet Explorer Exposed – CSS Bugs @ Position Is Everything
  • SitePoint CSS Reference
  • CSS Contents and Browser Compatibility

有关作者

Louis Lazaris 是1个定居在加拿大多数伦多的随意岗位者,网页页面开发设计者,在网站开发设计行业有9年的工作经验,在其blogImpressive Webs公布网页页面设计方案文章内容和实例教程。你能够follow Louis on Twitter 或在这里联络到他