项目开发过程中,有个反馈/跟踪的功能,想着用对话框的形式展示,开始的使用使用fieldset标题,配合lengend信息,结果页面非常丑陋!后期修正的时候上网查询了一下有没有类似手机短信那种对话框模式,结果还真找到了一个Demo:

Pure CSS speech bubbles

纯CSS编写,使用起来非常方便,最终选择了example-obtuse和example-right两种格式,并做了修改以符合现有系统的配色,展示效果比之前好了太多太多。

但事情还没有结束,在现代浏览器上,展示效果没有问题,但是低版本的浏览器上,效果可就不尽人意了,原因是低版本浏览器不支持border-radius属性,导致实现不了圆角框等图形。

针对ie的情况可以查看:CSS Compatibility and Internet Explorer

关于border-radius的内容如下表所示:

Internet Explorer 5 Internet Explorer 5.5 Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9
{ border-break : sBreak } border-break No No No No No No
{ border-image : sImage } border-image No No No No No No
{ border-radius : sRadius } border-radius No No No No No Yes
{ box-shadow : sShadow } box-shadow No No No No No Yes

另外附上关于Border Radius使用实例:

Border Radius

Hands on: Border Radius


发表评论