XuGang

记录一个程序员的成长

 

关于CSS 3 及浏览器兼容性问题

 

CSS 3 标准

随着AJAX 及jQuery 的出现，CSS 也在不断地自我完善。

CSS 3 吸取了多年来Web 发展的需求，提出了很多新颖的CSS 特性。

 

例如：CSS 3 中的圆角矩形 border-radius 属性（但在IE 浏览器中无效）。

<html>
<head>
<title>圆角矩形</title>
<style type="text/css">
<!--
div{
    width:200px;height:120px;
    border:2px solid #000000;
    background-color:#FFFF00;
    border-radius:20px;                /* CSS3 中的圆角矩形     */
    -moz-border-radius:20px;           /* mozilla 中的圆角矩形  */
    -webkit-border-radius:20px;        /* Safari 3 中的圆角矩形 */
}
-->
</style>
</head>
<body>
<div></div>
</body>
</html>

注意：由于IE 7 浏览器是以CSS 2 为基础，所以不支持圆角属性。

 

浏览器的兼容性

浏览器的兼容性，程序员可以通过http://www.css3.info/selectors-test/test.html 来测试自己的浏览器对各种CSS 选择器的支持。

正是因为浏览器对CSS 3 的兼容性问题，使得CSS的属性没有得到推广。

 

jQuery 的引入

jQuery 框架通过预先的JavaScript 编程，提供了几乎所有的CSS 3 标准下的选择器。开发者可以利用这些选择器来选择HTML 中的标签元素。

注意：jQuery 中的这些选择器的兼容性非常好，在目前主流的浏览器下都可以使用。

 

posted on 2010-10-14 12:52  钢钢  阅读(1479)  评论(0)  编辑  收藏  举报

导航