css如何使用不同的文本增加圆形图像按钮的大小

Question

有人可以帮我解决一下如何增加圆角按钮的大小。请查看图片：

我希望能够写出任意长度的文字，圆形按钮会根据文字自动拉伸。

请帮助我如何编写CSS以使其正常工作？

注意：我不想使用CSS3 border-radius因为它在IE中不起作用而且我不想使用css3pie等，这就是为什么我创建了圆形图像。感谢

Answer 1

使用滑动门原理。 http://www.alistapart.com/articles/slidingdoors/

在推拉门中，您有两个极端，因为这些图像之间的图像（圆角）是背景。图像根据文本的长度移动（进一步滑动）。

Answer 2

ul {
    list-style-type: none;  
}
ul li {
    height: 31px; // height of the background image *reused below
    margin: 10px; // width of the left image *reused below
    float: left;
    background: url(left.png) no-repeat top left;
}
ul li div {
    height: 31px;
    margin-left: 10px;
    padding-right: 10px;
    background: url(right.png) no-repeat top right;
}

//与

一起使用

<ul>
    <li><a href="#"><div>text</div></a></li>
    <li><a href="#"><div>texttexttext</div></a></li>
    <li><a href="#"><div>texttexttexttext</div></a></li>
</ul>

Answer 3

我可能会选择创建一个继承css类的div，如下所示

<div class="button">TEXT HERE</div>

CSS将如下：

.button { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: blue; }

以上样式允许所有浏览器（旧IE除外）将圆角渲染为圆形，这意味着您不需要图像