说明:
1、display:inline-block; 这个属性IE8和firefox3.0已经支持,IE6和IE7不支持,解决方法是*display:inline; zoom:1;原因如下: 使得display:inline;使得IE下元素变成内联元素,然后使用zoom:1;触发块元素的layout(我理解为可布局——对高度宽度敏感)。
2、class为“c”和“d”中的样式中用line-height,而没有使用高度原因在于使用height会使得IE下的元素获得layout,结果IE6与IE7下class为“c”的DIV宽度会延伸至100%;宽度满屏。
3、class为“b”的样式中position:relative;解决IE6下负的margin部分不可见的问题。_float:left;开始使用的是float:left,但是IE7下左-1px的大小没有起作用。无左浮动,IE6下由于高度原因,使IE6获得layout,结果宽度满屏延伸。于是就用了个针对IE6的hack。再想想办法,应该可以找到无hack的方法。
最后,我根据自己的理解又写了其他两个方法实现渐变背景,宽度自适应且圆角的按钮,且没有任何hack,兼容主流浏览器。唯一的缺点不能与文字图片等内联元素混排,因为最外DIV使用浮动。
方法一:纯css实现的质感圆角按钮
<title>纯css实现的质感圆角按钮</title>
<style type="text/css">
body{font-size:12px;}
.a{display:inline-block; border-width:1px 0; border-color:#bbbbbb; border-style:solid; vertical-align:middle; *display:inline; zoom:1;}
.b{height:22px; border-width:0 1px; border-color:#bbbbbb; border-style:solid; margin:0 -1px; background:#e3e3e3; position:relative; _float:left;}
.c{line-height:10px; background:#f9f9f9; border-bottom:2px solid #eeeeee;}
.d{padding:0 8px; line-height:22px; color:#000000; margin-top:-12px; cursor:pointer;}
</style>
<body>
<div class="a">
<div class="b">
<div class="c"> </div>
<div class="d">css圆角按钮</div>
</div>
</div>
<div class="a">
<div class="b">
<div class="c"> </div>
<div class="d">css圆角按钮2</div>
</div>
</div>
</body>
方法二:稍微繁琐点的
<title>纯css实现的质感圆角按钮</title>
<style type="text/css">
.a{float:left; border-width:1px 0; border-color:#bbbbbb; border-style:solid;}
.b{height:22px; border-width:0 1px; border-color:#bbbbbb; border-style:solid; margin:0 -1px; background:#e3e3e3; position:relative; float:left;}
.c{height:10px; padding:0 8px; font-size:12px; overflow:hidden; background:#f9f9f9; border-bottom:2px solid #eeeeee; margin-bottom:-12px; float:left;}
.d{padding:0 8px; line-height:22px; font-size:12px; color:#000000; clear:both; cursor:pointer; position:relative;}
.c span{visibility:hidden;}
</style>
![](http://www.qyit.net/uploadfile/200907/20090719005212184.jpg)
<body>
<div class="a">
<div class="b">
<div class="c"><span>css圆角按钮</span></div>
<div class="d">css圆角按钮</div>
</div>
</div>
</body>
图:
![](https://i-blog.csdnimg.cn/blog_migrate/0eb801a75e345912ad90c0f83c40c233.jpeg)
已通过兼容性测试,不上多图了
针对性说明:
1、要想实现自适应,在IE下,如果定高,就要设置浮动属性,否则元素宽度满屏显示,从class为“b”和“c”的两个样式可以看到。
2、为了让class为“c”的元素和class为“d”的元素宽度一致,可谓来了个内容copy。只是“c”的文字内容设置为隐藏,但是区域保留,即宽度保留,实现渐变背景高光部分与文内容宽度一致。
方法二:相对简介精简的
代码:
<title>纯css实现的质感圆角按钮</title>
<style type="text/css">
.a{float:left; border-width:1px 0; border-color:#bbbbbb; border-style:solid;}
.b{height:22px; border-width:0 1px; border-color:#bbbbbb; border-style:solid; margin:0 -1px; background:#e3e3e3; position:relative; float:left;}
.c{line-height:10px; color:#f9f9f9; background:#f9f9f9; border-bottom:2px solid #eeeeee;}
.d{padding:0 8px; line-height:22px; font-size:12px; color:#000000; clear:both; margin-top:-12px; cursor:pointer;}
</style>
![](http://www.qyit.net/uploadfile/200907/20090719005212184.jpg)
<body>
<div class="a">
<div class="b">
<div class="c"> </div>
<div class="d">css圆角按钮</div>
</div>
</div>
</body>
图:
已做过兼容性测试,就不上多图了,长得一样的。
说明:class为"c"的DIV中的空格—— 是必须的,否则该DIV会被当作空DIV处理,高度为0.
其他就不多说了。