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

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

来源

2009-07-26 Brad Birdsall

这并不回答你的问题，但我倾向于为了避免在它们的效果之后命名类别，最好在它的性质之后命名类别（特别是如果你稍后决定不同的配色方案），例如，称之为“笔记”或“重要” – 2009-07-26 19:09:05

感谢您的建议。 -B – 2009-07-26 19:12:39

由于您使用的两个图像反正（推拉门通常只涉及一个图像;事实上，这就是问题所在），你可以做到这一点，而不是保持透明度：

.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-26 19:08:43 Blixt

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

回答

相关问题