1

我正在使用滑动门技术来设置我正在制作的网站上的按钮样式，它似乎可以在 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

4

1 回答 1

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>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;
}
于 2009-07-26T19:08:43.630 回答