| 導購 | 订阅 | 在线投稿
分享
 
 
 

圓角自適應寬度按鈕的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); }
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
  免責聲明:本文僅代表作者個人觀點,與王朝網絡無關。王朝網絡登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述,其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
 
© 2005- 王朝網路 版權所有