61阅读

internet explorer 8-CSS在Internet Explorer 6, 7 和8中的差别

发布时间:2017-11-05 所属栏目:业界

一 : CSS在Internet Explorer 6, 7 和8中的差别

关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存。截至本文,Internet Explorer各个版本总共占据了大约65%的市场份额。在网站开发社区,这个数字要小很多,统计显示大概只有40%。

这些统计中比较有趣的部分是,IE6、IE7、IE8之间的数值很接近,这防止了单个Microsoft的浏览器占居统治地位——与过去的情况相反。根据这些令人遗憾的统计结果,在为客户开发网站的时候开发人员对所有当前使用的IE浏览器做全面的测试是必要的,而且这样在个人项目上也可以拉拢更多的用户。

多谢那些JavaScript库(框架),跨浏览器的Javascript的测试已经像当前形势所允许的那样接近完美了。但在CSS开发中还不是这样,特别是关系到IE目前存在的三个版本。

本文尝试为希望了解CSS对IE6、IE7、IE8的支持的不同的开发者提供一份详细的、易用的参考。本参考包含以下情况的概述和兼容情况:

A、三个浏览器中的一个支持而另外两个不支持的条目

B、三个浏览器中的两个支持而另外一个不支持的条目

本文不讨论:

A、三个浏览器都不支持的条目

B、私有属性

因此,本文的中心是三个浏览器中的不同,而不是必要的支持缺陷。该列表被分为以下五个部分:

1、选择器与继承

2、伪类与伪元素

3、属性支持

4、其它各种技术

5、重要bug和不兼容问题

1、选择器与继承

A、子选择器

示例

 

body > p {
color: #fff;
}

 

描述

子选择器选择一个特定父级元素的所有直接子级元素,在上面的例子中,body是父元素,p是子元素。

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

Bugs

IE7中,如果在父级标签和子级标签之间有一个HTML注释,子选择器将不会工作。

B、链类

示例

 

.class1.class2.class3 {
background: #fff;
}

 

描述

链类用于送一个HTML元素有多个class声明的情况,就像这样:

 

<div class="class1 class2 class3">
<p>Content here.</p>
</div>

 

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

Bugs

IE6好像支持这种情况,因为它能匹配链中的最后一个class到使用该class的元素上,然而,它并不能限制一个使用链中所有class的元素。

C、属性选择器

示例

 

a[href] {
color: #0f0;
}

 

描述

该选择器允许一个元素被定位只要它有指定的属性。在上面的例子中,所有的带有href属性的a标签都会被限定,而没有href属性的a标签不会被限定。

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

D、临近兄弟选择器

示例

 

h1+p {
color: #f00;
}

 

描述

该选择器定位临近到指定元素的兄弟标签。上面的例子将会限定p标签,但是他必须是h1标签的兄弟而且要直接尾随在h1标签的后面。比如:

 

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

 

在上面的代码中,CSS样式将只对第一个p有效。因为它是h1的兄弟而且紧跟着h1。第二个p也是h1的一个兄弟,但是它没有紧跟着h1。

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

Bugs

在IE7中,如果在兄弟之间有一个HTML注释,临近兄弟选择器将无效。

E、普通兄弟选择器

示例

 

h1~p {
color: #f00;
}

 

描述

该选择器定位一个指定元素后面的所有兄弟元素。将此选择器应用到上面的那个例子,将会对两个p标签都有效。当然,如果有一个p元素出现在h1之前,那个p元素不会被匹配。

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

2、伪类和伪元素

A、 :hover后面的后代选择器

示例

 

a:hover span {
color: #0f0;
}

 

描述

一个元素可以被:hover伪类后面的选择器定位,就像后代选择器一样。上面的例子,在鼠标悬停的时候,将会改变a元素内的span元素中的文字的颜色。

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

B、 链伪类

示例

 

a:first-child:hover {
color: #0f0;
}

 

描述

伪类可以链起来以缩小元素选择。上面的例子会定位每一个父级元素下的第一个a标签,并将hover伪类P应用到它上。

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

C、 非锚点元素中的:hover

示例

 

div:hover {
color: #f00;
}

 

描述

:hover伪类可以应用到任何元素的悬停状态,而不只是a标签。

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

D、 :first-child伪类

示例

 

div li:first-child {
background: blue;
}

 

描述

改伪类定位每一个指定的元素的父级元素的第一个子元素。

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

Bugs

IE7中,如果要定位的第一个子元素之前有HTML注释,first-child伪类将会无效。

E、 :focus伪类

示例

 

a:focus {
border: 1px solid red;
}

 

描述

该伪类定位有键盘焦点的所有元素。

支持情况

 

IE6 No

IE7 No

IE8 Yes

 

F、 :before 和:after 伪类

示例

 

#box:before {
content: "本段文字在盒子前面";
}

#box:after {
content: "本段文字在盒子后面";
}

 

描述

这两个伪元素分别在指定元素的前面和后面添加生成的内容,结合content属性一起使用。

支持情况

 

IE6 No

IE7 No

IE8 Yes

 

3、属性支持

A、由position产生的实际大小

示例

 

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

 

描述

定义top, right, bottom, 和left 值到绝对定位的元素上将给这个元素实际的大小(宽度和高度),虽然并没有设定使宽度和高度值。

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

B、Min-Height 与 Min-Width

示例

 

#box {
min-height: 500px;
min-width: 300px;
}

 

描述

这两个属性分别指定元素的宽和高的最小值,允许一个盒子可以比指定的最小值更大,但是不能更小。它们两个可以一起使用,也可以分开来用。

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

C、Max-Height 和Max-Width

示例

 

#box {
max-height: 500px;
max-width: 300px;
}

 

描述

这两个属性分别指定元素的高和宽的最大值,允许一个盒子比这个指定的最大值小,但是不能更大。它们也可以同时使用或者单独使用。

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

D、透明边框颜色

示例

 

#box {
border: solid 1px transparent;
}

 

描述

一个透明的边框色允许一个边框和边框色可见(或者不透明)时占用一样的空间。

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

E、固定位置元素

示例

 

#box {
position: fixed;
}

 

描述

position属性的这个值允许一个元素绝对的相对于窗口定位。

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

F、固定位置的背景图

示例

 

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

 

描述

background-attachment属性的值为fixed允许一个背景图片绝对地相对于窗口定位。

支持情况

 

IE6 No

IE7 Yes

IE8 Yes

 

Bugs

就像position:fixed一样,IE6同样不支持background-positon的fixed值 。然而,在IE6中只有在这个值用于根元素的时候才有效。

G、属性值“inherit”

示例

 

#box {
display: inherit;
}

 

描述

将值inherit 应用到一个属性那个允许一个元素从它的包含元素继承计算的值。

支持情况

 

IE6 No

IE7 No

IE8 Yes

 

Bugs

IE6 和IE7 不支持inherit 值除了direction 和visibility 属性。

H、表格单元的边框空白

示例

 

table td {
border-spacing: 3px;
}

 

描述

该属性设置相邻的表格单元的边框之间的空白。

支持情况

 

IE6 No

IE7 No

IE8 Yes

 

I、在表格中渲染空单元格

示例

 

table {
empty-cells: show;
}

 

描述

该属性,只应用于元素的display属性被设置为 table-cell的元素,允许空单元格渲染他们的边框和背景。否则,它们将不可见。

支持情况

 

IE6 No

IE7 No

IE8 Yes

 

J、表格标题的水平位置

示例

 

table {
caption-side: bottom;
}

 

描述

这个属性允许将一个表格的标题放到表格的底部——默认是头部。

支持情况

 

IE6 No

IE7 No

IE8 Yes

 

K、修剪区域

示例

 

#box {
clip:rect(20px, 300px, 200px, 100px)
}

 

描述

该属性指定一个盒子的一个区域可见,剩下的部分修剪掉,或者不可见。

支持情况

 

IE6 No

IE7 No

IE8 Yes

 

Bugs

有趣的是,该如果不使用隔开各个值的逗号,IE6和IE7也可以用这个属性。(比如,使用空格隔开剪切的值。)

L、打印页面中的orphanes和widows

示例

 

p {
orphans: 4;
}

p {
widows: 4;
}

 

描述

orphans属性设定在打印页面底部显示的最少行数。而widows 属性用来设定打印页面头部至少显示的段落的行数。

支持情况

 

IE6 No

IE7 No

IE8 Yes

 

M、盒子内的页面分割

示例

 

#box {
page-break-inside: avoid;
}

 

描述

该属性设定分页是否发生在一个指定元素内。

支持情况

 

IE6 No

IE7 No

IE8 Yes

 

N、 Outline 属性

示例

 

#box {
outline: solid 1px red;
}

 

描述

outline 是outline-style, outline-width, 和outline-color的缩写。该属性要优于border属性,因为它不会影响文档流,因而u更有助于调试布局问题。

支持情况

 

IE6 No

IE7 No

IE8 Yes

 

O、 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值设定将多个空白元素折叠为一个空白,同时允许明确的设置断行。white-space 属性的pre-wrap 值不会将多个空白折叠为一个,不过也允许明确的设置断行。

支持情况

 

IE6 No

IE7 No

IE8 Yes

 

4、其它各种技术

A、@import的媒体类型

示例

 

@import url("styles.css") screen;

 

描述

就像上面的例子那样,引入的样式表文件的媒体类型声明在文件地址的后面。在该例子中,媒体类型是”screen”。

支持情况

 

IE6 No

IE7 No

IE8 Yes

 

Bugs

尽管IE6 和IE7 支持 @import,它们在媒体类型被指定的时候会无效,甚至会引起正@import规则无效。

B、 计数递增

示例

 

h2 {
counter-increment: headers;
}
h2:before {
content: counter(headers) ". ";
}

 

描述

该CSS 技术允许你自动增加出现在指定元素前面的编号,结合before伪元素一起使用。

支持情况

 

IE6 No

IE7 No

IE8 Yes

 

C、生成内容的引用字符

示例

 

q {
quotes: "'" "'";
}

q:before {
content: open-quote;
}

q:after {
content: close-quote;
}

 

描述

指定用于生成内容的引用呼号,用于q标签。

支持情况

 

IE6 No

IE7 No

IE8 Yes

 

5、重要bug和不兼容性问题

下面是在上文中没有提到的IE6和IE7的众多bug。当然这个列表不包括在这三个浏览器中都不支持的条目。

IE6 Bugs

A、不支持用样式设置<abbr> 元素

B、不支持以连字符和下划线开头的class和ID名

C、<select> 元素总是出现在堆叠最上面,而无视z-index值

D、如果锚点的伪类没有使用正确的顺序(:link, :visited, :hover),:hover 伪类将无效

E、一个属性的!important 声明会被同一规则中同一属性的没有使用!important的第二个声明覆盖。

F、height 表现类似于min-height

G、width 表现类似于min-width

H、左右margin双倍

I、圆点边框(dotted)看起来像虚线边框(dashed)

J、text-decoration的 line-through 值在文字上看起来比别的浏览器要高一些

K、有序列表如果有一个固定结构(haslayout为true,不能设置li的高度/宽度/zoom等激活haslayout的值),序号就不会增加,而是保持为1

L、列表元素不支持list-style-type的所有可用的值

M、如果列表条目浮动,指定的list-style-image 将不会显示

N、不完全支持 @font-face

O、某些选择器会错误的匹配注释和文档声明

P、如果一个ID 选择器结合一个类选择器不匹配,同样的ID选择器结合不同的类选择器也将被当作不匹配。

IE7 Bugs

A、有序列表如果有一个固定结构(haslayout为true,不能设置li的高度/宽度/zoom等激活haslayout的值),序号就不会增加,而是保持为1

B、列表元素不支持list-style-type的所有可用的值

C、如果列表条目浮动,指定的list-style-image 将不会显示

D、不完全支持 @font-face

E、某些选择器会错误的匹配注释和文档声明

F、一些在这里没有提到的IE bug只会在特定环境发生,而且没有指定到特定的CSS属性或值。

二 : Internet Explorer 8.0 正式版

微软宣布Internet Explorer 8.0 释放

internetexplorer8 Internet Explorer 8.0 正式版中国 - 中文 简体 For Windows Server 2003http://go.microsoft.com/fwlink/?LinkID=142202
internetexplorer8 Internet Explorer 8.0 正式版 Windows XP
internetexplorer8 Internet Explorer 8.0 正式版 Windows XP x64
internetexplorer8 Internet Explorer 8.0 正式版 Windows Vista
internetexplorer8 Internet Explorer 8.0 正式版 Windows Vista 64-bit
internetexplorer8 Internet Explorer 8.0 正式版 Windows Server 2003
internetexplorer8 Internet Explorer 8.0 正式版 Windows Server 2003 64-bit
internetexplorer8 Internet Explorer 8.0 正式版 Windows Server 2008
internetexplorer8 Internet Explorer 8.0 正式版 Windows Server 2008 64-bit
internetexplorer8 Internet Explorer 8.0 正式版 Group Policy Settings Reference Windows Internet Explorer 8 Release Candidate 1
internetexplorer8 Internet Explorer 8.0 正式版 Windows Internet Explorer 8 Technology Overview for Developers
internetexplorer8 Internet Explorer 8.0 正式版 Windows Internet Explorer 8 FAQ for Business
internetexplorer8 Internet Explorer 8.0 正式版 Windows Internet Explorer 8 Technology Overview for Enterprise and IT Pros
internetexplorer8 Internet Explorer 8.0 正式版 Techniques for Preinstalling Windows Internet Explorer 8 whitepaper
internetexplorer8 Internet Explorer 8.0 正式版 Windows Internet Explorer 8 Compatibility View List

如何让你的网站从今天开始准备迎接IE8

internetexplorer8 Internet Explorer 8.0 正式版推荐:修改你网站的内容以支持Internet Explorer 8的默认网页视图标准,欲了解更多信息,请参阅:http://msdn.microsoft.com/zh-cn/library/cc817575.aspx
internetexplorer8 Internet Explorer 8.0 正式版备用:让你的网站告诉Internet Explorer 8强制使用Internet Explorer 7模式。(www.61k.com)internetexplorer8 Internet Explorer 8.0 正式版 
internetexplorer8 Internet Explorer 8.0 正式版如果以网站为基础,请新增HTTP标头:X-UA-Compatible: IE=EmulateIE7
internetexplorer8 Internet Explorer 8.0 正式版如果以网页为基础,请在网页的<title>标记之后添加<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Windows Internet Explorer工具

internetexplorer8 Internet Explorer 8.0 正式版 MIX09:Expression Web 团队昨宣布了一款跨浏览器测试工具 SuperPreview,,,,,,,下载Microsoft Expression Web SuperPreview
internetexplorer8 Internet Explorer 8.0 正式版 IE7Pro
internetexplorer8 Internet Explorer 8.0 正式版 IETester
internetexplorer8 Internet Explorer 8.0 正式版 Internet Explorer 开发者工具栏(IE8已封装 )
internetexplorer8 Internet Explorer 8.0 正式版 IE DebugBar( 现已无法访问 )
internetexplorer8 Internet Explorer 8.0 正式版 Internet Explorer 谷歌工具栏
internetexplorer8 Internet Explorer 8.0 正式版 Windows Live 工具栏

扩展:internet explorer8.0 / internet explorer 8 / internet explorer9.0

Web应用程序开发

internetexplorer8 Internet Explorer 8.0 正式版 IE8的Activities,WebSlices示例--ie8.taobao.com
internetexplorer8 Internet Explorer 8.0 正式版 IE8学习资料集合
internetexplorer8 Internet Explorer 8.0 正式版 IE8 WebSlice 尝鲜
internetexplorer8 Internet Explorer 8.0 正式版 实例讲解IE8新特性之webSlices
internetexplorer8 Internet Explorer 8.0 正式版 如何创建IE8新增即时搜索建议功能Search AutoSuggestions

internetexplorer8 Internet Explorer 8.0 正式版 Web Slice and Feed Authentication – Developer Guidelines
internetexplorer8 Internet Explorer 8.0 正式版 Site Compatibility and IE8
internetexplorer8 Internet Explorer 8.0 正式版 More IE8 Extensibility Improvements
internetexplorer8 Internet Explorer 8.0 正式版 The CSS Corner: Using Filters In IE8
internetexplorer8 Internet Explorer 8.0 正式版 IE8 Security Part VII: ClickJacking Defenses
internetexplorer8 Internet Explorer 8.0 正式版 Accessibility: Improved ARIA Support in the IE8 RC
internetexplorer8 Internet Explorer 8.0 正式版 The CSS Corner: Alternate Style Sheets
internetexplorer8 Internet Explorer 8.0 正式版 New Accessibility Features in IE8
internetexplorer8 Internet Explorer 8.0 正式版 Ending Expressions
internetexplorer8 Internet Explorer 8.0 正式版 Updates for AJAX in IE8 Beta 2
internetexplorer8 Internet Explorer 8.0 正式版 The IE8 IEAK
internetexplorer8 Internet Explorer 8.0 正式版 Hello, World: Getting Started with IE8 Visual Search
internetexplorer8 Internet Explorer 8.0 正式版 Introducing the IE8 Developer Tools JScript Profiler
internetexplorer8 Internet Explorer 8.0 正式版 Native JSON in IE8
internetexplorer8 Internet Explorer 8.0 正式版 Microsoft CSS Vendor Extensions
internetexplorer8 Internet Explorer 8.0 正式版 Developer Tools in Internet Explorer 8 Beta 2
internetexplorer8 Internet Explorer 8.0 正式版 IE8 Security Part VI: Beta 2 Update
internetexplorer8 Internet Explorer 8.0 正式版 Introducing Compatibility View
internetexplorer8 Internet Explorer 8.0 正式版 Introducing IE=EmulateIE7
internetexplorer8 Internet Explorer 8.0 正式版 IE8 Security Part II: ActiveX Improvements
internetexplorer8 Internet Explorer 8.0 正式版 Address Bar Improvements in Internet Explorer 8 Beta 1
internetexplorer8 Internet Explorer 8.0 正式版 Activities and WebSlices in Internet Explorer 8
internetexplorer8 Internet Explorer 8.0 正式版 The Internet Explorer 8 User-Agent String和The Internet Explorer 8 User-Agent String (Updated Edition)

早前的Internet Explorer 8.0 Beta

internetexplorer8 Internet Explorer 8.0 正式版 Internet Explorer 8 RC1发布

扩展:internet explorer8.0 / internet explorer 8 / internet explorer9.0


internetexplorer8 Internet Explorer 8.0 正式版 Internet Explorer 8 Beta 2 发布( 追加内容 )

Internet Explorer 8.0 资源

Internet Explorer 8 中的新东西
internetexplorer8 Internet Explorer 8.0 正式版 http://msdn.microsoft.com/zh-cn/library/cc288472(en-us,VS.85).aspx

Internet Explorer 8 主页
internetexplorer8 Internet Explorer 8.0 正式版 http://www.microsoft.com/windows/internet-explorer/beta/default.aspx   

Internet Explorer MSDN开发中心
internetexplorer8 Internet Explorer 8.0 正式版 http://msdn.microsoft.com/zh-cn/ie/default.aspx

Internet Explorer Technet技术中心
internetexplorer8 Internet Explorer 8.0 正式版 http://technet.microsoft.com/zh-cn/ie/default.aspx

IE浏览器兼容中心
internetexplorer8 Internet Explorer 8.0 正式版 http://msdn.microsoft.com/zh-cn/ie/cc405106.aspx

Internet Explorer 8 封锁工具包   
internetexplorer8 Internet Explorer 8.0 正式版 http://www.microsoft.com/downloads/details.aspx?FamilyID=21687628-5806-4ba6-9e4e-8e224ec6dd8c&displaylang=en

Internet Explorer 8 准备工具包
internetexplorer8 Internet Explorer 8.0 正式版 http://www.microsoft.com/windows/internet-explorer/beta/readiness/

Internet Explorer Administration Kit 8
internetexplorer8 Internet Explorer 8.0 正式版 http://technet.microsoft.com/zh-cn/library/cc817437(en-us).aspx

IE Blog
internetexplorer8 Internet Explorer 8.0 正式版 http://blogs.msdn.com/ie/

IE8 在 Channel 9
internetexplorer8 Internet Explorer 8.0 正式版 http://channel9.msdn.com/tags/IE8/

IE8 视频
internetexplorer8 Internet Explorer 8.0 正式版 http://www.microsoft.com/windows/internet-explorer/beta/videos.aspx

IE8 Demos   
internetexplorer8 Internet Explorer 8.0 正式版 http://www.ie8demos.com/

IE8 加载项资源库   
internetexplorer8 Internet Explorer 8.0 正式版 http://ieaddons.com/cn/  

IE8 中的兼容性视图列表的说明
internetexplorer8 Internet Explorer 8.0 正式版 http://support.microsoft.com/kb/960321/

某些网站可能无法正确显示,或在 Windows Internet Explorer 8 中正常工作
internetexplorer8 Internet Explorer 8.0 正式版 http://support.microsoft.com/kb/956197

扩展:internet explorer8.0 / internet explorer 8 / internet explorer9.0

三 : CSS在Internet Explorer 6, 7 和8中的差别

CSS在Internet Explorer 6, 7 和8中的差别 关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存。截至本文,Internet Explorer各个版本总共占据了大约65%的市场份额。在网站开发社区,这个数字要小很多,统计显示大概只有40%。

这些统计中比较有趣的部分是,IE6、IE7、IE8之间的数值很接近,这防止了单个Microsoft的浏览器占居统治地位——与过去的情况相反。根据这些令人遗憾的统计结果,在为客户开发网站的时候开发人员对所有当前使用的IE浏览器做全面的测试是必要的,而且这样在个人项目上也可以拉拢更多的用户。

多谢那些JavaScript库(框架),跨浏览器的Javascript的测试已经像当前形势所允许的那样接近完美了。但在CSS开发中还不是这样,特别是关系到IE目前存在的三个版本。 本文尝试为希望了解CSS对IE6、IE7、IE8的支持的不同的开发者提供一份详细的、易用的参考。本参考包含以下情况的概述和兼容情况:

A、三个浏览器中的一个支持而另外两个不支持的条目

B、三个浏览器中的两个支持而另外一个不支持的条目

本文不讨论:

A、三个浏览器都不支持的条目

B、私有属性 因此,本文的中心是三个浏览器中的不同,而不是必要的支持缺陷。该列表被分为以下五个部分:

1、选择器与继承

2、伪类与伪元素

3、属性支持

4、其它各种技术

5、重要bug和不兼容问题

1、选择器与继承

A、子选择器

示例

body > p {

color: #fff;

}

描述

子选择器选择一个特定父级元素的所有直接子级元素,在上面的例子中,body是父元素,p是子元素。

支持情况

IE6 No

IE7 Yes

IE8 Yes

Bugs

IE7中,如果在父级标签和子级标签之间有一个HTML注释,子选择器将不会工作。

B、链类

示例

.class1.class2.class3 {

background: #fff;

}

描述

链类用于送一个HTML元素有多个class声明的情况,就像这样:

<div class="class1 class2 class3">

<p>Content here.</p>

</div>

支持情况

IE6 No

IE7 Yes

IE8 Yes

Bugs

IE6好像支持这种情况,因为它能匹配链中的最后一个class到使用该class的元素上,然而,它并不能限制一个使用链中所有class的元素。

C、属性选择器

示例

a[href] {

color: #0f0; }

描述

该选择器允许一个元素被定位只要它有指定的属性。在上面的例子中,所有的带有href属性的a标签都会被限定,而没有href属性的a标签不会被限定。

支持情况

IE6 No

IE7 Yes

IE8 Yes

D、临近兄弟选择器

示例

h1+p {

color: #f00;

}

描述

该选择器定位临近到指定元素的兄弟标签。上面的例子将会限定p标签,但是他必须是h1标签的兄弟而且要直接尾随在h1标签的后面。比如:

<h1>heading</h1>

<p>Content here.</p>

<p>Content here.</p>

在上面的代码中,CSS样式将只对第一个p有效。因为它是h1的兄弟而且紧跟着h1。第二个p也是h1的一个兄弟,但是它没有紧跟着h1。 支持情况

IE6 No

IE7 Yes

IE8 Yes

Bugs

在IE7中,如果在兄弟之间有一个HTML注释,临近兄弟选择器将无效。

E、普通兄弟选择器

示例

h1~p {

color: #f00;

}

描述

该选择器定位一个指定元素后面的所有兄弟元素。将此选择器应用到上面的那个例子,将会对两个p标签都有效。当然,如果有一个p元素出现在h1之前,那个p元素不会被匹配。

支持情况

IE6 No

IE7 Yes

IE8 Yes

2、伪类和伪元素

A、 :hover后面的后代选择器

示例

a:hover span {

color: #0f0;

}

描述

一个元素可以被:hover伪类后面的选择器定位,就像后代选择器一样。上面的例子,在鼠标悬停的时候,将会改变a元素内的span元素中的文字的颜色。

支持情况

IE6 No

IE7 Yes

IE8 Yes

B、 链伪类 示例

a:first-child:hover {

color: #0f0;

}

描述

伪类可以链起来以缩小元素选择。上面的例子会定位每一个父级元素下的第一个a标签,并将hover伪类P应用到它上。

支持情况

IE6 No

IE7 Yes

IE8 Yes

C、 非锚点元素中的:hover

示例

div:hover {

color: #f00;

}

描述

:hover伪类可以应用到任何元素的悬停状态,而不只是a标签。 支持情况

IE6 No

IE7 Yes

IE8 Yes

D、 :first-child伪类

示例

div li:first-child {

background: blue;

}

描述

改伪类定位每一个指定的元素的父级元素的第一个子元素。

支持情况

IE6 No

IE7 Yes

IE8 Yes

Bugs

IE7中,如果要定位的第一个子元素之前有HTML注释,first-child伪类将会无效。 E、 :focus伪类

示例

a:focus {

border: 1px solid red;

}

描述

该伪类定位有键盘焦点的所有元素。

支持情况

IE6 No

IE7 No

IE8 Yes

F、 :before 和:after 伪类

示例

#box:before {

content: "本段文字在盒子前面";

}

#box:after { content: "本段文字在盒子后面";

}

描述

这两个伪元素分别在指定元素的前面和后面添加生成的内容,结合content属性一起使用。

支持情况

IE6 No

IE7 No

IE8 Yes 3、属性支持

A、由position产生的实际大小

示例

#box {

position: absolute;

top: 0;

right: 100px;

left: 0;

bottom: 200px;

background: blue; }

描述

定义top, right, bottom, 和left 值到绝对定位的元素上将给这个元素实际的大小(宽度和高度),虽然并没有设定使宽度和高度值。

支持情况

IE6 No

IE7 Yes

IE8 Yes

B、Min-Height 与 Min-Width

示例

#box {

min-height: 500px;

min-width: 300px;

}

描述

这两个属性分别指定元素的宽和高的最小值,允许一个盒子可以比指定的最小值更大,但是不能更小。它们两个可以一起使用,也可以分开来用。

支持情况

IE6 No

IE7 Yes

IE8 Yes

C、Max-Height 和Max-Width

示例

#box {

max-height: 500px;

max-width: 300px;

}

描述

这两个属性分别指定元素的高和宽的最大值,允许一个盒子比这个指定的最大值小,但是不能更大。它们也可以同时使用或者单独使用。

支持情况

IE6 No

IE7 Yes

IE8 Yes

D、透明边框颜色

示例

#box {

border: solid 1px transparent;

}

描述

一个透明的边框色允许一个边框和边框色可见(或者不透明)时占用一样的空间。 支持情况

IE6 No

IE7 Yes

IE8 Yes

E、固定位置元素

示例

#box {

position: fixed;

}

描述

position属性的这个值允许一个元素绝对的相对于窗口定位。 支持情况

IE6 No

IE7 Yes

IE8 Yes

F、固定位置的背景图

示例

#box {

background-image: url(images/bg.jpg);

background-position: 0 0;

background-attachment: fixed;

}

描述

background-attachment属性的值为fixed允许一个背景图片绝对地相对于窗口定位。 支持情况

IE6 No

IE7 Yes

IE8 Yes

Bugs

就像position:fixed一样,IE6同样不支持background-positon的fixed值 。然而,在IE6中只有在这个值用于根元素的时候才有效。

G、属性值“inherit”

示例

#box {

display: inherit;

}

描述

将值inherit 应用到一个属性那个允许一个元素从它的包含元素继承计算的值。 支持情况

IE6 No

IE7 No

IE8 Yes

Bugs

IE6 和IE7 不支持inherit 值除了direction 和visibility 属性。 H、表格单元的边框空白

示例

table td {

border-spacing: 3px;

}

描述

该属性设置相邻的表格单元的边框之间的空白。 支持情况

IE6 No

IE7 No

IE8 Yes

I、在表格中渲染空单元格

示例

table {

empty-cells: show;

}

描述

该属性,只应用于元素的display属性被设置为 table-cell的元素,允许空单元格渲染他们的边框和背景。否则,它们将不可见。

支持情况

IE6 No

IE7 No

IE8 Yes

J、表格标题的水平位置

示例

table {

caption-side: bottom;

}

描述

这个属性允许将一个表格的标题放到表格的底部——默认是头部。 支持情况

IE6 No

IE7 No

IE8 Yes

K、修剪区域

示例

#box {

clip:rect(20px, 300px, 200px, 100px) }

描述

该属性指定一个盒子的一个区域可见,剩下的部分修剪掉,或者不可见。 支持情况

IE6 No

IE7 No

IE8 Yes

Bugs

有趣的是,该如果不使用隔开各个值的逗号,IE6和IE7也可以用这个属性。(比如,使用空格隔开剪切的值。)

L、打印页面中的orphanes和widows

示例

p {

orphans: 4;

}

p {

widows: 4;

}

描述

orphans属性设定在打印页面底部显示的最少行数。而widows 属性用来设定打印页面头部至少显示的段落的行数。

支持情况

IE6 No

IE7 No

IE8 Yes

M、盒子内的页面分割

示例

#box {

page-break-inside: avoid;

}

描述

该属性设定分页是否发生在一个指定元素内。

支持情况

IE6 No

IE7 No

IE8 Yes

N、 Outline 属性

示例

#box {

outline: solid 1px red;

}

描述

outline 是outline-style, outline-width, 和outline-color的缩写。该属性要优于border属性,因为它不会影响文档流,因而u更有助于调试布局问题。

支持情况

IE6 No

IE7 No

IE8 Yes

O、 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值设定将多个空白元素折叠为一个空白,同时允许明确的设置断行。white-space 属性的pre-wrap 值不会将多个空白折叠为一个,不过也允许明确的设置断行。

支持情况

IE6 No

IE7 No

IE8 Yes

4、其它各种技术

A、@import的媒体类型

示例

@import url("styles.css") screen;

描述

就像上面的例子那样,引入的样式表文件的媒体类型声明在文件地址的后面。在该例子中,媒体类型是”screen”。

支持情况

IE6 No

IE7 No

IE8 Yes

Bugs

尽管IE6 和IE7 支持 @import,它们在媒体类型被指定的时候会无效,甚至会引起正@import规则无效。

B、 计数递增

示例

h2 {

counter-increment: headers;

}

h2:before {

content: counter(headers) ". "; }

描述

该CSS 技术允许你自动增加出现在指定元素前面的编号,结合before伪元素一起使用。

支持情况

IE6 No

IE7 No

IE8 Yes

C、生成内容的引用字符

示例

q {

quotes: "'" "'";

}

q:before {

content: open-quote;

}

q:after {

content: close-quote;

}

描述

指定用于生成内容的引用呼号,用于q标签。

支持情况

IE6 No

IE7 No

IE8 Yes 5、重要bug和不兼容性问题

下面是在上文中没有提到的IE6和IE7的众多bug。当然这个列表不包括在这三个浏览器中都不支持的条目。

IE6 Bugs

A、不支持用样式设置<abbr> 元素

B、不支持以连字符和下划线开头的class和ID名

C、<select> 元素总是出现在堆叠最上面,而无视z-index值

D、如果锚点的伪类没有使用正确的顺序(:link, :visited, :hover),:hover 伪类将无效

E、一个属性的!important 声明会被同一规则中同一属性的没有使用!important的第二个声明覆盖。

F、height 表现类似于min-height

G、width 表现类似于min-width

H、左右margin双倍

I、圆点边框(dotted)看起来像虚线边框(dashed)

J、text-decoration的 line-through 值在文字上看起来比别的浏览器要高一些

K、有序列表如果有一个固定结构(haslayout为true,不能设置li的高度/宽度/zoom等激活haslayout的值),序号就不会增加,而是保持为1

L、列表元素不支持list-style-type的所有可用的值

M、如果列表条目浮动,指定的list-style-image 将不会显示

N、不完全支持 @font-face

O、某些选择器会错误的匹配注释和文档声明

P、如果一个ID 选择器结合一个类选择器不匹配,同样的ID选择器结合不同的类选择器也将被当作不匹配。

IE7 Bugs

A、有序列表如果有一个固定结构(haslayout为true,不能设置li的高度/宽度/zoom等激活haslayout的值),序号就不会增加,而是保持为1

B、列表元素不支持list-style-type的所有可用的值

C、如果列表条目浮动,指定的list-style-image 将不会显示

D、不完全支持 @font-face

E、某些选择器会错误的匹配注释和文档声明

F、一些在这里没有提到的IE bug只会在特定环境发生,而且没有指定到特定的CSS属性或值。

四 : Internet Explorer 8 已经RTM

一家俄罗斯网站今天透露,Internet Explorer 8已经在2月21日完成开发,正式RTM.

最终版本的版本号是8.0.6001.18691,在正式发布到Web以前将分发给TechNet/MSDN和Connect的用户,他们还给出了截图。新版IE8带来了更快的浏览速度和更少的用户操作,并且安全性和私密性更高。

五 : Internet Explorer 8 RC 下周发布

Internet Explorer 8 RC将会在下周某日发布,虽然这个版本还是RC状态,但是事实上如果没有较大漏洞,此版本将会和最终版没有太大差异。IE8当前面临的最大问题依然是兼容性问题,甚至微软的一些站点也还有适应IE8,这可能会需要一段时间来让网站开发者逐步了解适应IE8的特性。

另一个兼容性是IEAddon的问题,由于IE8采用了智能多线程技术,导致了IEAddon的开发存在技术困难,而微软并为对此提供更加详细的开发文档,比如IEpro由于无法兼容IE8,至今已经暂停开发。

本文标题:internet explorer 8-CSS在Internet Explorer 6, 7 和8中的差别
本文地址: http://www.61k.com/1092117.html

61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1