img{border:none} 解决IE浏览器有边框问题, 而W3C浏览器无边框问题
选择器的兼容性问题
1 儿子选择器>
IE7开始兼容, IE6不兼容。
div>p{
color:red;
}
div的儿子p。和div的后代p的截然不同。
能够选择：
<div>
<p>我是div的儿子</p>
</div>
不能选择：
<div>
<ul>
<li>
<p>我是div的重孙子</p>
</li>
</ul>
</div>
2 序选择器
IE8开始兼容；IE6、7都不兼容
选择第1个li：
<style type="text/css">
ul li:first-child{
color:red;
}
</style>
选择最后一个1i：
ul li:last-child{
color:blue;
}
由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7, 那么就要自己写类名：
<ul>
<li class="first">项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li class="last">项目</li>
</ul>
用类选择器来选择第一个或者最后一个：
ul li.first{
color:red;
}
ul li.last{
color:blue;
}
3 下一个兄弟选择器
IE7开始兼容, IE6不兼容。
+表示选择下一个兄弟
<style type="text/css">
h3+p{
color:red;
}
</style>
选择上的是h3元素后面紧挨着的第一个兄弟。
<h3>我是一个标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h3>我是一个标题</h3>
选择器：
说IE6层面兼容的： 标签选择器、id选择器、类选择器、后代、交集选择器、并集选择器、通配符。
p
#box
.spec
div p
div.spec
div,p
*
IE7能够兼容的：儿子选择器、下一个兄弟选择器
div>p
h3+p
IE8能够兼容的：序选择器
ul li:first-child
ul li:last-child
border-style兼容性问题
比如, border:10px ridge red; 在chrome和firefox、IE中有细微差别：
如果公司里面的设计师, 处女座的, 追求极高的页面还原度, 那么不能使用css来制作边框。
就要用到图片, 就要切图了。所以, 比较稳定的就几个：solid、dashed、dotted, 其他的边框样式尽量不要用。