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

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;
}

<a>元素不应该有 float: left; (因为它没有任何东西可以在 <li> 元素内 float 。) line-height用于垂直居中文本。

只使用一张图片是不可能的，但是如果你知道背景颜色是什么，你可以在那个颜色上压平图片，然后你就可以只使用一张图片(使用相同的 CSS和现在一样，但将 small-white-left.png 添加到 small-white-sprite.png 的左侧，然后将其用于两个元素。)

如果你想让按钮的最左边部分可以点击，输入 <span> <a> 中文本周围的元素元素并使用此 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;
}