Question

我的任务是创建带圆角的按钮，它将水平拉伸到容器（现在容器只有div）。它应该在IE8及更高版本中运行。

能否请您提供适当的解决方案，或者有更好的解决方案？

我的解决方案：

.button-streched {
    cursor: pointer;
    width: 100%;
    clear: both;
    background-position: 0px 0px;
}

div.button-show-more div{
    background-repeat: no-repeat;
    height: 34px;
    padding: 0;
}

.button-streched .left {
    float: left;
    background-image: url(/Images/buttton-left.png);
    width: 6px;
    height: 34px;
}

.button-streched .right {
    float: right;
    background-image: url(/Images/buttton-right.png);
    width: 6px;
    height: 34px;
}

.button-streched .middle {
    background-image: url(/Images/buttton-middle.png);
    background-repeat: repeat-x;
    background-color: lightgreen;
    margin: 0px 6px;
    text-align: center;
}

.button-streched span{
    vertical-align: middle;
    line-height: 34px;
}

div.button-streched:hover .left,
div.button-streched:hover .middle,
div.button-streched:hover .right {
    background-position: 0 100%;
    cursor: pointer;
}

和HTML：

<div id="btnButton1" class="button-streched" style="">
    <div class="left"></div>
    <div style="width: 100%;">
        <div class="right"></div>
        <div class="middle">
            <span>Do Some Action</span>
        </div>
    </div>
</div>

缩短版本，只是为了证明它有效： http://jsfiddle.net/xMKhZ/

Answer 1

您可以使用CSS3 PIE来渲染几个最有用的CSS3装饰功能。

Answer 2

用这个替换你的CSS。

.button-streched {
    cursor: pointer;
    width: 100%;
    clear: both;
    background-position: 0px 0px;
}

div.button-show-more div{
    background-repeat: no-repeat;
    height: 34px;
    padding: 0;
}

.button-streched .left {
    float: left;
    background-image: url(/Images/buttton-left.png);
    width: 6px;
    height: 34px;
}

.button-streched .right {
    float: right;
    background-image: url(/Images/buttton-right.png);
    width: 6px;
    height: 34px;
}

.button-streched .middle {
    background-image: url(/Images/buttton-middle.png);
    background-repeat: repeat-x;
    background-color: lightgreen;
    margin: 0px 6px;
    text-align: center;
    border-radius:10px;
}

.button-streched span{
    vertical-align: middle;
    line-height: 34px;
}

div.button-streched:hover .left,
div.button-streched:hover .middle,
div.button-streched:hover .right {
    background-position: 0 100%;
    cursor: pointer;
}

水平拉伸按钮

2 个答案: