來源:互聯網網民 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);
}
订阅
