WEB开发网
开发学院网页设计DivCss 圆角自适应宽度按钮的css实现 阅读

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

 2008-10-01 19:28:58 来源:WEB开发网   
核心提示:有时候我们需要一个链接看上去像按钮,所以就需要用到block属性,圆角自适应宽度按钮的css实现,如果要几个按钮并排或者需要和其他文字混排的时候,inline-block就可以很好的解决这个问题,似乎有很多种建议方案,但是只有一个叫-moz-inline-stack的属性可以作为替代方案,只是不是所有人都响应了Mozi

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

Tags:圆角 适应 宽度

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接