滑動門技術 - 瀏覽器兼容性

我正在使用滑動門技術來對我正在製作的網站上的按鈕進行樣式設置，並且它似乎可以在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

滑動門技術 - 瀏覽器兼容性

回答

相關問題