圓角自適應寬度按鈕的css實現

有時候我們需要一個鏈接看上去像按鈕，所以就需要用到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); }