首页 / CSS / CSS 在IE6, IE7 和IE8中的差别

CSS 在IE6, IE7 和IE8中的差别

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS 在IE6, IE7 和IE8中的差别，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6283字，纯文字阅读大概需要9分钟。

内容图文

技术分享

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

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

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

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

本文不讨论：

三个浏览器都不支持的条目
私有属性

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

选择器与继承
伪类与伪元素
属性支持
其它各种技术
重要bug和不兼容问题

选择器与继承

子选择器

示例

body > p {color:#fff;}

描述

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

支持情况

IE6
No

IE7
Yes

IE8
Yes

Bugs

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

链类

示例

描述

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

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

支持情况

IE6
No

IE7
Yes

IE8
Yes

Bugs

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

属性选择器

示例

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

描述

该选择器允许一个元素被定位只要它有指定的属性。在上面的例子中，所有的带有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样式将只对第一个p有效。因为它是h1的兄弟而且紧跟着h1。第二个p也是h1的一个兄弟，但是它没有紧跟着h1。

支持情况

IE6
No

IE7
Yes

IE8
Yes

Bugs

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

普通兄弟选择器

示例

h1~p {color:#f00;}

描述

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

支持情况

IE6
No

IE7
Yes

IE8
Yes

伪类和伪元素

:hover后面的后代选择器

示例

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

描述

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

支持情况

IE6
No

IE7
Yes

IE8
Yes

链伪类

示例

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

描述

伪类可以链起来以缩小元素选择。上面的例子会定位每一个父级元素下的第一个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;}

描述

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

支持情况

IE6
No

IE7
Yes

IE8
Yes

Bugs

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

:focus伪类

示例

a:focus {border:1pxsolidred;}

描述

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

支持情况

IE6
No

IE7
No

IE8
Yes

:before 和:after 伪类

示例

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

描述

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

支持情况

IE6
No

IE7
No

IE8
Yes

属性支持

由position产生的实际大小

示例

描述

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

支持情况

IE6
No

IE7
Yes

IE8
Yes

Min-Height 与 Min-Width

示例

描述

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

支持情况

IE6
No

IE7
Yes

IE8
Yes

Max-Height 和Max-Width

示例

描述

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

支持情况

IE6
No

IE7
Yes

IE8
Yes

透明边框颜色

示例

                #box
                {
                border
                :
                solid
                1px
                transparent
                ;
                }

描述

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

支持情况

IE6
No

IE7
Yes

IE8
Yes

固定位置元素

示例

描述

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

支持情况

IE6
No

IE7
Yes

IE8
Yes

固定位置的背景图

示例

                #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中只有在这个值用于根元素的时候才有效。

属性值“inherit”

示例

描述

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

支持情况

IE6
No

IE7
No

IE8
Yes

Bugs

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

表格单元的边框空白

示例

table td {border-spacing:3px;}

描述

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

支持情况

IE6
No

IE7
No

IE8
Yes

在表格中渲染空单元格

示例

table {empty-cells:show;}

描述

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

支持情况

IE6
No

IE7
No

IE8
Yes

表格标题的水平位置

示例

table {caption-side:bottom;}

描述

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

支持情况

IE6
No

IE7
No

IE8
Yes

修剪区域

示例

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

描述

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

支持情况

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
                ;
                }

描述

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

支持情况

IE6
No

IE7
No

IE8
Yes

Outline 属性

示例

描述

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

支持情况

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伪元素一起使用。

支持情况

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。当然这个列表不包括在这三个浏览器中都不支持的条目。

IE6 Bugs

不支持用样式设置<abbr>元素
不支持以连字符和下划线开头的class和ID名
<select> 元素总是出现在堆叠最上面，而无视z-index值
如果锚点的伪类没有使用正确的顺序(:link,:visited,:hover)，:hover伪类将无效
一个属性的!important声明会被同一规则中同一属性的没有使用!important的第二个声明覆盖。
height 表现类似于min-height
width 表现类似于min-width
左右margin双倍
圆点边框(dotted)看起来像虚线边框(dashed)
text-decoration的line-through值在文字上看起来比别的浏览器要高一些
有序列表如果有一个固定结构(haslayout为true，不能设置li的高度/宽度/zoom等激活haslayout的值)，序号就不会增加，而是保持为1
列表元素不支持list-style-type的所有可用的值
如果列表条目浮动，指定的list-style-image将不会显示
不完全支持@font-face
某些选择器会错误的匹配注释和文档声明
如果一个ID 选择器结合一个类选择器不匹配，同样的ID选择器结合不同的类选择器也将被当作不匹配。

IE7 Bugs

有序列表如果有一个固定结构(haslayout为true，不能设置li的高度/宽度/zoom等激活haslayout的值)，序号就不会增加，而是保持为1
列表元素不支持list-style-type的所有可用的值
如果列表条目浮动，指定的list-style-image将不会显示
不完全支持@font-face
某些选择器会错误的匹配注释和文档声明

原文：http://www.jb51.net/css/21991.html

内容总结

以上是互联网集市为您收集整理的CSS 在IE6, IE7 和IE8中的差别全部内容，希望文章能够帮你解决CSS 在IE6, IE7 和IE8中的差别所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1259987.html

来源：【匿名】

【上一篇】html5和css3的学习笔记【下一篇】php无法调用css怎么办

更多 ►

【CSS 在IE6, IE7 和IE8中的差别】教程文章相关的互联网学习教程文章

CSS 在IE6, IE7 和IE8中的差别【代码】【图】

这些统计中比较有趣的部分是，IE6、IE7、IE8之间的数值很接近，这防止了单个Microsoft的浏览器占居统治地位——与过去的情况相反。根据这些令人遗憾的统计结果，在为客户开发网站的时候开发人员对所有当前使用的IE浏览器做全面的测试是必要的，而且这样在个人项目上也可以拉拢更多的用户。多谢那些JavaScript库(框架)，跨浏览器的Javascript的测试已经像当前形势所允许的那样接近完美了。但在CSS开发中还不是这样，特别是关系到IE目...

[转载]IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例 —— 浏览器

1.区别IE和非IE浏览器CSS HACK代码 #divcss5{background:blue; /*非IE 背景藍色*/background:red \9; /*IE6、IE7、IE8背景紅色*/} 2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】：「\9」、「*」、「_」【示例】： #divcss5{background:blue; /*Firefox 背景变蓝色*/background:red \9; /*IE8 背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/} 【说明】：因为IE系列浏览器可读「\9」，而I...

让IE6/IE7/IE8支持CSS3属性的8种方法介绍

我们都知道，IE浏览器暂不支持CSS3的一些属性。国外的工程师们，不安于此现状，他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性，我觉得这些都是很有意义，很有价值的工作，可以推动整个技术领域的进步的。到目前为止，有不少可以让IE支持部分CSS3属性的工具。例如： 1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js) 这个玩意估计是试图让IE支持CSS3属性的鼻祖，还算蛮强大，就是性能开销较大，要解析很多文件脚本，给DOM添加...

怎么用css hack处理各浏览器兼容IE6，IE7,IE8,IE9/ FF

第一：什么事浏览器兼容性　　浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。这个大家都深有体会就不多解释了第二：出现浏览器不兼容的原因是什么　　因为不同浏览器使用内核及...

IE7新支持的CSS属性和属性选择符

以下是IE7中新支持的属性:min-height,max-height,min-width,max-width这个hack还可以使最大高度兼容IE6，你可以举一反三：{height:350px;overflow:hidden;}以下是IE7中新支持的属性选择符:精确属性匹配 [=] : 只有当属性完全匹配指定值的时候, 则会应用该css定义.存在匹配 []: 只要存在这样的属性, 则应用该css定义.连字号匹配[|=]: 使用连字号匹配的css定义. 例如: <span abc=”en-us”>dddd</span> 它就能应用 <style>[abc|=”en...

让IE6/IE7/IE8浏览器支持CSS3属性【代码】【图】

让IE6/IE7/IE8浏览器支持CSS3属性一、下载您可以狠狠地点击这里：ie-css3.htc，这个玩意儿是让IE浏览器支持CSS3表现的关键东东。二、上面的是什么东西首先说说.htc文件，.htc文件是个脚本文件，我个人以为与js文件属于同一货色，只是呢，貌似htc是Internet Explorer(IE)的私生子，只有IE才认它。htc文件可以用来描述web行为，web行为允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如Ac...

纯CSS实现兼容IE7及以上宽度自适应无限级导航菜单附演示

先来个Demo： http://www.jb51.net/jiaoben/111258.html好吧，我承认，我有点标题党了，IE7的兼容并不是特别好，当鼠标离开某个导航再进入时，会留下上一次子菜单的残影（写的好像玄幻小说似的=。=）不过纯属研究，O(∩_∩)O哈哈~ 宽度自适应是指各级菜单都可以随内容的长度自行适应宽度，而当浏览器分辨率较低时一级导航也可以自动换行，而多级子菜单靠左显示还是得手动调整。 DOM结构比较简单，只是 ol.nav 与 li.item 的互相嵌...

在ie7下css居中样式text-align:center;偏左问题解决方法

复制代码代码如下:body { text-align:center; } 用ie7打开是居左的。万能 float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽. 复制代码代码如下:.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; }.clearf...

解决IE7以下版本不支持无A状态伪类的几种方法_经验交流

在IE7以下版本一直是不支持无A状态伪类的，通常都要靠Javascript来解决的，最近经常有人问起此类问题，故整理了几种方法，脚本来自国外网站，供大家参考。方法一 javascript文件，来自Htmldog . 代码如下:function suckerfish(type, tag, parentId) { if (window.attachEvent) { window.attachEvent("onload", function() { var sfEls = (parentId==null)?document.getElementsByTagName(tag):document....

用xhtml+css写的相册自适应-类似九宫格[兼容　ffie6ie7opear]_javascript技巧【图】

功能：1.图片可以缩放，外框也随之变动。2.图片缩放后，居底对齐。3.鼠标滑上去，边框有虚线。结构：源代码：相册自适应写法 /* ================================================================== general xhtml 1.0 - Main style sheet - liquid design 2007-05-18 Author - ouhee Backa made by 相册自适应写法 ================================================================== */ * {margin:0px;padding:0px...

用xhtml+css写的相册自适应 - 类似九宫格[兼容　ff ie6 ie7 opear ]【图】

IE6,IE7下设置body{overflow:hidden;}失效Bug(转)_html/css_WEB-ITnose

此项其实并不是Bug，只是各浏览器默认付值不同造成的，其他明智的浏览器还好，这个bug只出现在IE6 IE7下问题重现： There are no scrollbars on this page in sane browsershtml, body, p { margin: 0; padding: 0;}body { overflow: hidden;}p { width: 5000px; height: 5000px;} IE6 IE7下不生效（IE6下横向纵向滚动条都在 IE7下纵向滚动条还在）原因：明智的浏览器(ex. chrome and fire...

ie7、ie8下Table中td列固定宽度未按样式设定显示曲线解决方案_html/css_WEB-ITnose

1 2 3 4 5 6 .title {background-color:#ccc;width: 150px} 7 8 9 10 11 12 哈哈13 aa14 大都市15 bb16 17 18 adad19 alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快的拉拉alkjd阿拉快...

IE6，IE7，FF|CSS+DIV兼容问题综合解决方案CSSHACK_html/css_WEB-ITnose

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明http://monw3c.blogbus.com/logs/12837657.html 一、CSS HACK以下两种方法几乎能解决现今所有HACK. 1、 !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) #wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */} 2、IE6/IE77对FireFox *+html 与 *html 是IE特有的标签...

DIV+CSS解决IE6，IE7，IE8，FF兼容问题_html/css_WEB-ITnose

1.ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了 2.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important解决，比如 margin-left:10px !important;/*IE7,IE8,FF下是10PX*/; margin-left:5px;/*IE6下属性写的是5PX，但在显示出来的是10px 3.清除块display，这个可以解决浮动造成的块，造成块后，当DIV背景填色或填图片...