html - 为什么我的按钮没有完全对齐？

Question

我在这里发布了一个按钮:

http://buttontest.raptorshop.com/

但出于某种原因，它并没有完全对齐。什么会导致这种情况？

我尝试更改行高、填充等。

这是我的 CSS 代码:

a.gbutton {
    background: transparent url('buttonside.png') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 82px;
    margin-right: 6px;
    padding-right: 46px; /* sliding doors padding */
    text-decoration: none;
}

a.gbutton span {
    background: transparent url('buttonmain.png') no-repeat;
    display: block;
    line-height: 68px;
    padding: 5px 0 5px 18px;
}

我是根据网上找到的教程修改的，完美的CSS布局对我来说一直是个难题。

Answer 1

滑动门技术之所以有效，是因为扩展矩形不会改变其外观。但是扩展椭圆会，因此您的代码将无法按预期工作。

这是我能得到的最好的:

a.gbutton {
    background: transparent url('buttonside.png') no-repeat scroll right top;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 82px;
    margin-right: 10px;
    padding-right: 51px;
    text-decoration: none;
}

a.gbutton span {
    background: transparent url('buttonmain.png') no-repeat left top;
    background-size: 100% auto;
    display: block;
    line-height: 68px;
    padding: 5px 0 5px 18px;
    height: 100%;
    width: 100%;
}

更新

只需使用单个图像并指定 CSS:

background-size: 100% auto;