圆角自适应宽度按钮的css实现

王朝html/css/js·作者佚名  2008-10-02
窄屏简体版  字體: |||超大  

有时候我们需要一个链接看上去像按钮,所以就需要用到block属性,如果要几个按钮并排或者需要和其他文字混排的时候,inline-block就可以很好的解决这个问题。

只是不是所有人都响应了Mozilla的号召把Firefox升级到了3.0。遗憾的是,Firefox2不支持这个属性。网上查了一下,似乎有很多种建议方案,但是只有一个叫-moz-inline-stack的属性可以作为替代方案。

已测试通过的浏览器:IE6, IE7, FF2, FF3。

XHTML:

<a class="rbutton" href="###"><span>Insert</span></a>CSS:

/*======== AUTHOR: Jimbor Chu

===========================*/

a.rbutton, a.rbutton:visited

{

background:url(images/bg_button_left.gif) left top no-repeat;

height: 23px;

line-height: 20px;

text-decoration: none;

color: #fff;

display: inline-block;

display: -moz-inline-stack;

padding-left: 10px;

vertical-align: middle;

font-size: 14px;

}

a.rbutton:hover

{

background-image:url(images/bg_button_left_hover.gif);

color: #fff;

}

a.rbutton span

{

background: url(images/bg_button_right.gif) right top no-repeat;

height: 23px;

line-height: 20px;

padding-right: 10px;

cursor: pointer;

display: -moz-inline-stack;

display: inline-block;

}

a.rbutton:hover span

{

background-image:url(images/bg_button_right_hover.gif);

}

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航