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

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

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

请告知

提前谢谢。

---

-B

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

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

元素不应具有

浮动：左

（因为它在

元素内没有任何浮动。）

行高用于垂直居中文本

仅使用一个图像是不可能的，但如果您知道背景颜色是什么，您可以在该颜色上展平图像，那么您将能够仅使用一个图像（使用与现在相同的CSS，但在
小白精灵.png
的左侧添加
小白精灵.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;
}

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

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

元素不应具有
浮动：左
（因为它在
元素内没有任何浮动。）
行高用于垂直居中文本

仅使用一个图像是不可能的，但如果您知道背景颜色是什么，您可以在该颜色上展平图像，那么您将能够仅使用一个图像（使用与现在相同的CSS，但在
小白精灵.png
的左侧添加
小白精灵.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;
}

这并不能回答你的问题，但我倾向于避免根据其效果命名类，最好根据其性质命名类（特别是如果你以后决定使用不同的配色方案），例如，将其命名为“notes”或“important”，这并不能回答你的问题，但我倾向于避免根据其效果命名类，最好根据类别的性质来命名（特别是如果您以后决定使用不同的配色方案），例如，将其命名为“notes”或“important”是的PNG边缘有一点透明度。这可能是问题所在
small white sprite.png
将通过
small white left.png
的透明度发光，使其看起来好像根本没有使用左边的图像（如果它与另一个图像具有相同的阴影）。是的，png在边缘周围有一点透明度。这可能是问题所在
small white sprite.png
将通过
small white left.png
的透明度发光，使其看起来好像完全没有使用左侧图像（如果它与其他图像具有相同的阴影）