如何在ie6下面设计出圆角，全兼容的

 

妈的，看看人家css3多么简单，一个css命令就够了，但是呢，你还得考虑那个万恶的ie6，谁让我的网站是面对的农民伯伯，估计用的都是ie6.

 

首先我针对类似于这样的圆角。如下：

 

先是做 235px长 1px像素高的图片（content_bar.png），然后平铺y方向（这里的容器高位35px），当然平铺之后是长方形的。

接着做两个图片，长和宽都是35px，大部分是透明图片，只有左边的有一部分圆弧外面的是白色，我这里为了让大家看得清楚，把图片反色了，里面的黑色其实在网页上是白色。聪明的读者肯定知道了，另外一张图片肯定就是与之水平翻转的图片了。正好是标题的左右角。

  （blocktitle_left_corner.png）

 

接下来，我是这样写的html。

 

 

<div class="xo-block">
<div class="xo-blocktitle">       

<div class="xo-blocktitle-mask-left"></div>
<div class="xo-blocktitle-mask-right"></div>

<h3>网站公告</h3></div>
...............
</div>

 

css这样写

 

.xo-block .xo-blocktitle-mask-left {
    height: 35px;
    width: 35px;
    float: left;
    background-image: url("../img/blocktitle_left_corner.png");

}

.xo-block .xo-blocktitle-mask-right {
    height: 35px;
    width: 35px;
    float: right;
    background-image: url("../img/blocktitle_right_corner.png");

}

.xo-blocktitle {
    height: 35px;
    background: url("../img/content_bar.png") repeat-y;

}

.xo-blocktitle h3 { 
    line-height: 35px;
    color: #000099;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 18px;
    padding-left: 30px;
    text-indent: -1000px;
}

 

我们知道在标准的浮动模型里面，可以知道h3会无视.xo-blocktitle-mask-left和.xo-blocktitle-mask-right，而处于那左右角的背后去，所以文字还是在那一行显示。只要高度设的对就是这样的效果，而浮动的特性就是dom脱离文档流，因此两个角肯定是在正常文档流的上方，blocktitle_left_corner.png中的白色就会遮掩住.xo-blocktitle的背景的两角，形成圆角的效果。

这里在ff下是完美了。但是，在ie6下还是有不止一个问题。

 

首先在ie6下，不支持透明图片，于是在网上下了一个ie6pngfix的插件（本页面提供下载），把它放在网站目录下某个地方，添加代码

<script type="text/javascript" src="<{$xoops_url}>/include/me/iepngfix/iepngfix_titlebg.js">
</script>

还有在css里添加。

.xo-blocktitle-mask-left, .xo-blocktitle-mask-right  {
    behavior: url(/shbank/include/me/iepngfix/iepngfix.htc);
}

 

这里的路径是从apache的根目录开始的。这里貌似不能写相对路径啊啥的，一定要绝对的。我写了相对的没效果。为什么呢，貌似behavior的属性比较特殊，其路径相对的不是当前css文件，而是加载该css文件的页面，那我们也不知道我们到底加载的哪个页面，就写绝对路径了。如果要换目录这里也要改的。

 

如果这个时候你打开ie6，会发现根本看不到透明图片，这是因为在ie6下，其浮动模型是不一样的。那个h3不会无视那两个角，结果就出现在了两个角的下方，所以你没看到效果。这个时候，再修改以前的css

 

.xo-block .xo-blocktitle-mask-left {
    height: 35px;
    width: 35px;
    float: left;
    background-image: url("../img/blocktitle_left_corner.png");
    _position: absolute; /*css mhack*/
    _top: 0px;
    _left: 0px;
}

.xo-block .xo-blocktitle-mask-right {
    height: 35px;
    width: 35px;
    float: right;
    background-image: url("../img/blocktitle_right_corner.png");
    _position: absolute;
    _top: 0px;
    _right: 0px;
}

.xo-blocktitle {
    _position: relative;
    height: 35px;
    background: url("../img/content_bar.png") repeat-y;
    _overflow: hidden; /*ie6*/
    _width: 100%; /*ie6，否则会被background img撑大*/
}

.xo-blocktitle h3 {
    line-height: 35px;
    color: #000099;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 18px;
    padding-left: 30px;
    text-indent: -1000px;
}

 

看到了吗？者利用了css hack的技巧。那些css属性名前加_的就是css hack，只写给ie6看的。你看到.xo-blocktitle的position为relative，那么其子元素如果绝对定位的话，其left和top就会针对.xo-blocktitle的。这样让两个角绝对定位就达到了h3无视那两个角的目的。注意.xo-blocktitle里面的两个css hack，这个是为什么呢？因为我们之前设置了一个behavior属性，那个属性会暗地里把我们的h3的width改成260px，好像是100%的长度。接着那个h3有一个属性是padding-left:30px那么按照css盒模型，其占用的宽度就相当于是290px。然后在ie6下父元素被子元素给撑开了，所以.xo-blocktitle就被撑开到了290px，导致了样式错误。解决方案是不要让.xo-blocktitle被撑开，就需要用设定宽度再overfllow:hidden的方式，这样，子元素撑开的部分就被切掉了。而且因为.xo-blocktitle设置了宽度，所以.xo-blocktitle-mask-right也能正确定位的。

 

当然这只是其中一种解决方案，还有一个办法也可以奏效，而且可能更加简单

 

那就是不要做那两个角了，直接连带做一个带圆角的背景标题图片，还不要是透明的，把圆弧做好后，再把原来的背景的图案相对应的做在圆弧的外面，根本就不要什么处理了，直接拉上去就好。这种情况更适用于背景比较复杂或有明显渐变而不是纯色的情况，这类情况第一种方法是无法处理的。其实，现在想想，拿这一种方法其实更好，简单啊，而且不会产生多余的html，我真傻怎么当初没用这一种呢？不过，用第一种还是学到了不少东西的，尤其是ie6和ff的区别，看来走弯路也不见得是坏事啊！

 

 

 

 

评论

14 楼 happysoul 2011-02-17  

http://happysoul.iteye.com/blog/606847

看这个吧 比你的还要多一些 你只是把圆角文件处理了
其实边框也是可以包括到gif文件里面的
半透明没什么太复杂的

13 楼 xiaojing3517 2011-02-14  

楼主好素质。
楼主高水平。

12 楼 sunwt 2011-02-14  

上面的达人也给出自己的方案吧，刚入此道，很想多学习学习

11 楼 rainsilence 2011-02-13  

大哥。。用canvas画都比你这个快。。。

10 楼 sunlong 2011-02-13  

兄弟泗洪的？

9 楼 xieyongwei 2011-02-12  

居然在ie6圆角实现上还这么纠集的人 还责怪人家是农民伯伯，太强大了！

8 楼 refar 2011-02-12  

这东西我7年前就实现了。。。

7 楼 interjc 2011-02-12  

这种纯色背景在IE6下换用gif就行了，不需要js

6 楼 vb2005xu 2011-02-12  

可以看看 http://www.iteye.com/topic/610962 这个帖子

5 楼 zuoge85 2011-02-12  

你那个图片gif完全够了.......

4 楼 chensulong 2011-02-12  

不好意思，忘记说了，pie css我以前用的是beta2的，存在一个问题，当圆角元素嵌套圆角元素的时候，在IE6下就出现BUG了，不知道beta3现在修正了没有。

3 楼 maosuhan 2011-02-11  

呵呵，我也是做了一个简单的实验，没有想到这么多模式，领教了

2 楼 zuoge85 2011-02-11  

楼主我忍不住了，你声明的是xhtml在ie6下就是标准框模型。。。

所以其他人没乱说，是你。。。。没懂

ie5有怪异模型和。。。标准的。。。

还有你用gif做就可以透明了，png用滤镜，用你说的那个东西，如果图片太多会变慢的。

1 楼 chensulong 2011-02-11  

使用css3pie可以更快，更easy的实现全兼容圆角。