0

我的任务是创建带有圆角的按钮，该按钮将水平延伸到容器（现在容器只是 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/

4

2 回答 2

0

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

于 2013-08-26T11:52:51.853 回答
0

用这个替换你的 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;
}
于 2013-08-26T11:56:09.103 回答