滑动门技术 - 浏览器兼容性

Question

我正在使用滑动门技术来设计我正在制作的网站上的按钮样式，它似乎可以在 Chrome 中工作，但背景不会为任何其他浏览器显示。 我的按钮代码如下：

<div class="small-white"><a href="#">Done Reading</a></div>

CSS：

.small-white { 
    float:left; 
    background:url(images/small-white-sprite.png) right no-repeat; 
    margin: 15px 5px 0 5px; 
    padding:0; 
    display:block;
            height:22px;
}
.small-white a {
    display:block;
    background:url(images/small-white-left.png) no-repeat left;
    padding:4px 10px 7px 9px;
    color:#333;
    text-decoration:none;
    float:left;
}

请告知。

提前致谢。 -B

Answer 1

由于您无论如何都使用两个图像（滑动门通常只涉及一个图像；事实上，这就是重点），因此您可以这样做以保持透明度：

.small-white { 
    background: url(images/small-white-left.png) no-repeat 0 0;
    float: left;
    margin: 15px 5px 0 5px;
    padding: 0 0 0 9px; /* NOTE: 9px should be replaced with the width of above
                                 image. */
}
.small-white a {
    background: url(images/small-white-sprite.png) no-repeat 100% 0;
    color: #333;
    display: block;
    height: 22px;
    line-height: 22px;
    padding: 0 10px 0 0;
    text-decoration: none;
}

元素应该' t 有 float: left; （因为它在

元素内没有任何东西可以浮动。）line-height 用于使文本垂直居中。

在透明情况下，不可能只使用一张图像，但是如果您知道背景颜色是什么，您可以将图像拼合到该颜色上，然后您将能够只使用一张图像（使用与现在相同的 CSS，但将 small-white-left.png 添加到 small-white-sprite.png 的左侧，然后将其用于两个元素。）

如果您想要左侧- 按钮的大部分可点击，在 元素中的文本周围放置一个 元素并使用以下 CSS：

.small-white { 
    float: left;
    margin: 15px 5px 0 5px;
    padding: 0;
}
.small-white a {
    background: url(images/small-white-left.png) no-repeat 0 0;
    color: #333;
    display: block;
    padding: 0 0 0 9px;
    text-decoration: none;
}
.small-white span {
    background: url(images/small-white-sprite.png) no-repeat 100% 0;
    display: block;
    height: 22px;
    line-height: 22px;
    padding: 0 10px 0 0;
}