CSS Sprite按鈕在表格內消失

我創建了一個CSS按鈕，它幾乎完美地工作。問題是，當按鈕大於其分配的空間時，它的末端會下降到下一行。它也擴大了頁面寬度，以適應它，但最後是在下一行> =（。擴展頁面是完全正常的，但按鈕應該是整體。CSS Sprite按鈕在表格內消失

這是我的示例頁面... http://www.lolstrategies.com/test/button_sample.html

它使用兩個表和按鈕需要也可以是表

我目前的CSS使用浮動：。留下的查看源代碼的圖像推到一起，你可以看到，我希望即使沒有浮動，也不需要完全重做，但如果這是唯一的答案，我願意這麼做。

我使用的圖片是這樣的：

enter image description here

來源

2011-08-30 Craig

從我的理解，如果你把一個HTML元素中的文本，沒有任何形式的格式（如空格）的，然後它會伸出元素的寬度，除非通過溢出另有說明：隱藏; - 這個原因對我來說有點不清楚，但似乎這樣工作。 –

恐怕第二個元素沒有足夠的空間時，「float：left」將始終這樣做。你必須給它更多的空間，或者使用另一種方法。 – Blazemonger

你不必完全重做。只是一些小的變化。活生生的例子：http://jsfiddle.net/tw16/Pwmcn/

.buttonLarge { 
    height:22px; 
    margin: 0 22px 0 12px; /* add this */ 
} 
.primaryLargeButtonEnd { 
    width: 12px; 
    height:12px; 
    padding: 0px 0px 0px 5px; 
    display: inline-block; /* add this instead of float:left */ 
    background: transparent url('./composite__V153767378_.png') no-repeat left -75px; 
}

來源

2011-08-30 20:09:35 tw16

這絕對是在Firefox中的伎倆...但是，當使用IE它看起來相當破壞。我看着你在IE中的實例，它看起來不錯，我猜js-fiddle的渲染器比IE瀏覽器更適合Firefox。我更新了我的示例（http://www.lolstrategies.com/test/button_sample.html）以使用您的版本，以便您可以看到它在IE中的外觀。謝謝您的幫助！任何想法修復IE瀏覽器？ – Craig

@ user379467：當您將它應用到您的示例中時，它在IE中看起來混亂的原因是因爲您尚未應用文檔類型。這意味着IE進入怪癖模式。如果你把'<！DOCTYPE html>'作爲你文檔中的第一件事（甚至在''標籤之前），它會再次看起來很好，並確保IE進入標準模式。 – tw16

CSS Sprite按鈕在表格內消失

回答

相關問題