CSS differences in IE6,7,8

The list is divided into five parts:

• Selectors and inheritance
• Pseudo-classes and pseudo elements
• Attribute Support
• Various other techniques
• Important bug and incompatibilities

1. selectors and inheritance

Child selector

Example:   body > P { Color : #fff ; }

Description:  Sub selector to select a particular element of all the direct parent to child elements, in the example above, bodyis the parent element pis a child element.

Support for

IE6
No

IE7
Yes

IE8
Yes

Bugs

IE7, if there is a HTML comment tags between the parent and child tag, the sub-selection will not work.

Chain class

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

Description: chain class is used to send an HTML element has a plurality of class statement, like this:

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

Support for

IE6
No

IE7
Yes

IE8
Yes

Bugs

IE6 seems to support this case, because it can match the chain in the last class to use the elements of the class, however, it does not restrict the use of a class of all elements of the chain.

Attribute selectors

Example:   A [ the href ] { Color : # 0f0 ; }

description:

This selector allows an element to be positioned as long as it has the specified attribute. In the above example, all the labels are with a href attribute is defined without a tag href attribute is not defined.

Support for

IE6
No

IE7
Yes

IE8
Yes

Near Brothers selector

Example:   h1 of + P { Color : # F00 ; }

description:

The selector is positioned near Brother label to the specified element. The above example will define p tag, but he must be a brother h1 tag but also directly trailing behind the h1 tag. such as:

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

In the above code, CSS style will be valid only for the first p. Because it is h1 brother and followed h1. The second p h1 is also a brother, but it is not followed by h1.

Support for

IE6
No

IE7
Yes

IE8
Yes

Bugs

In IE7, if there is an HTML comments between the brothers, brothers near the selectors will be invalid.

Ordinary brothers selector

Example:  h1 of P ~ { Color : # F00 ; }

description:

The selector is positioned behind a sibling element for all specified elements. Selector apply this to the example above, it will be valid for two p tags. Of course, if there is a p element appears before the h1, p element that can not be matched.

Support for

IE6
No

IE7
Yes

IE8
Yes

Pseudo-classes and pseudo elements

: Hover behind descendant selectors

示例:   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: 1px solid red; }

描述:

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

支持情况

IE6
No

IE7
No

IE8
Yes

:before 和:after 伪类

示例:

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

描述

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

支持情况

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

描述:

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

支持情况

IE6
No

IE7
Yes

IE8
Yes

Max-Height 和Max-Width

示例:

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

描述

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

支持情况

IE6
No

IE7
Yes

IE8
Yes

透明边框颜色

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

描述

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

支持情况

IE6
No

IE7
Yes

IE8
Yes

固定位置元素

示例:   #box { position: fixed; }

描述

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”

示例:   #box { display: 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 属性

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

描述

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
  • 某些选择器会错误的匹配注释和文档声明

转载于:https://www.cnblogs.com/JoannaQ/archive/2012/08/29/2661452.html