如何让IE7,8支持CSS3圆角的方法

html-css012

如何让IE7,8支持CSS3圆角的方法,第1张

css3的border-radius在IE7和8是不兼容的,即无效,那么如果要IE8及以下版本的浏览器兼容圆角,只能用图片来实现。即做一张圆角效果的图片,然后通过这张图片来实现圆角效果。

四个角你设置的高度是8px

ie在你高度低于行高(line-height)的情况下,怕你会看不到文字,会强制将高度设置成行高的高度

解决方法就是将行高和字号设置到比你设置的高度还低,overflow:hidden纯属个人喜好

例:

#prighttop

{

width:8px

height:8px

line-height:0

font-size:0

overflow:hidden

position:absolute

right:-1px

top:-1px

background:url(bg.gif) no-repeat -2px -32px

}

border-radius:5px

ie下另写程序 圆角是好的,如下图

出现这种问题,估计是easyui中某个样式引起的吧~

解决方案:一种办法是把tab的背景 渐变一下,设置header-gradient-from,颜色和背景色相差无几,不过不好看

但有个缺陷是 无背景条的tab圆角有些问题 如上图中左上角的tab

这时就需要重写一下有背景的tab样式,效果如下

.tabs li.tabs-selected a.tabs-inner {

    background-color: #ffffff

    color: #0E2D5F

    background: -webkit-linear-gradient(top,#cccccc,#ffffff 100%)

    background: -moz-linear-gradient(top,#cccccc,#ffffff 100%)

    background: -o-linear-gradient(top,#cccccc,#ffffff 100%)

    background: linear-gradient(to bottom,#cccccc,#ffffff 100%)

    background-repeat: repeat-x

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc,endColorstr=#ffffff,GradientType=0)

}