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>元素内没有任何东西可以漂浮。）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;
}

滑门技术 - 浏览器兼容性

1 个答案: