ie789css兼容性,浏览器兼容性问题——IE不支持却很实用的CSS属性(一)

1. Outline(适用范围：鼠标悬浮hover加外边框)

我们在布局的时候，常常会因为添加边框border影响宽高的布局。

那么，outline是完美的替代品，因为它可以在不影响文档流的情况下呈现该对象。但是IE6 和IE7 不支持 outline 属性。所以，它不能在这两个浏览器中用于调试。

Title

ul {

width: 500px;

margin: 50px auto;

list-style: none;

}

li {

width: 100px;

height: 100px;

background: #ececec;

float: left;

margin-right: 10px;

}

li:hover {

background: pink;

/*border: 2px solid red; */ /*border可以兼容到任何浏览器*/

outline: 2px solid red; /*outline只有IE6和IE7不支持此属性*/

}

2. first-child(第一个元素)、last-child(最后一个元素)、nth-child(*) (第*个元素) (适用范围：块级元素中有相同的元素)

Title

ul {

width: 500px;

margin: 50px auto;

list-style: none;

}

li {

width: 100px;

height: 100px;

float: left;

margin-right: 10px;

}

li:first-child {

background: pink;

}

li:last-child {

background: green;

}

li:nth-child(2) {

background: red;

}

li:nth-child(3) {

background: yellow;

}