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

2008-10-02 07:47:39  編輯來源:互聯網  简体版  手機版  評論  字體: 小|中|大

 

　　有时候我们需要一个链接看上去像按钮，所以就需要用到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);

　　}

 

 

 

有时候我们需要一个链接看上去像按钮，所以就需要用到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); }