当然,兼容问题总是困扰网页开发者的,CSS3 圆角按钮也不例外,尤其在旧版浏览器中,如 IE6、IE7、IE8 等等,都不能很好地支持 border-radius 属性。因为在旧版浏览器中,要实现绚丽的圆角按钮,必须使用图片。这样就需要为每个按钮单独创建一张圆角图片,使得页面加载变得很慢,而且还需要考虑适配不同设备的尺寸。
为了解决这个兼容问题,有许多解决方法,比如使用 JavaScript 来模拟实现圆角,但这种方法会使页面变得缓慢,而且支持度也无法保证。最好的解决方案是使用 CSS3pie,这是一个JavaScript库,用于实现 CSS3 的一些高级功能,例如圆角,盒阴影和渐变。它兼容 IE6 到 IE9 标准模式,并支持许多其他浏览器。CSS3pie 可以通过 CSS代码来控制圆角半径、阴影、渐变等样式的属性值,使圆角按钮看起来与使用图片无异。
.button { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; behavior: url(/PIE.htc); }
上面的 CSS 代码使用了 CSS3 中的 border-radius 属性,其中 behavior 属性指定了 CSS3pie JavaScript 库的地址,这个库可以在 IE6 到 IE9 的浏览器中模拟实现 CSS3 的高级功能。此外,还可以在 CSS3pie 的官方网站上下载最新的版本。
总之,CSS3 圆角按钮虽然有兼容问题,但大家有许多解决方案。选择一个好用的库,就可以不用为每个按钮单独创建一张圆角图片,大大减少页面的加载时间和代码量。