IE瀏覽器的CSS錯誤：它將'填充左'附加到'背景圖像'的末尾？

我有一個奇怪的錯誤。
在我的.css文件，我有以下規則：IE瀏覽器的CSS錯誤：它將'填充左'附加到'背景圖像'的末尾？

.conf-view a 
{ 
    padding-left: 10px; 
    background-image: url("images/bullet-green.gif"); 
    background-position: center left; 
    background-repeat: no-repeat; 
}

的問題是，IE瀏覽器在某種程度上將其解釋是這樣的：

.conf-view A /* NOTE - this is copied from the IE-Developer tools css tab. */ 
    background-image : url(images/bullet-green.gif); PADDING-LEFT: 10px 
    background-repeat : no-repeat 
    background-position : left center

見填充左呢？
現在，瀏覽器只是忽略填充規則，導致佈局失敗。

這是一個已知的錯誤嗎？任何人都可以找到解決辦法嗎？

非常感謝
幼獅

來源

2010-06-24 kfiroo

需要一個鏈接.... – reisio 2010-06-24 13:37:47

我會創建一個簡化的測試頁面 – kfiroo 2010-06-24 13:39:43

即8目前。但我也在ie9平臺預覽中看到它。 – kfiroo 2010-06-24 14:01:51

它似乎是它應用背景圖像的不同方式......在保存代碼並使用樣式表設置填充爲50時，圖像和文本一起移動，所以它不是忽略填充，只是它的處理與背景圖像的定位不同。

有趣的是，faileN的建議與我所做的修復相差不遠。如果你把「display：inline-block;」那麼這似乎在IE7和FF工作。當然，在使用它之前，你會想測試它在別處沒有副作用。

來源

2010-06-24 14:37:17 Chris

非常感謝，我會嘗試，如果我不能得到第一個解決方案工作 – kfiroo 2010-06-24 14:52:28

謝謝，你的答案解決了我的錯誤。 – kfiroo 2010-06-24 15:01:12

也許這是因爲a - 元素通常是一個內聯元素。即使允許這些元素具有背景圖像和填充/邊距，這並不常見。將display: block;置於您的a風格定義中。也許它在這種情況下幫助你。

編輯

等待您的樣本代碼:)

來源

2010-06-24 13:53:31

如果它有[display：block]，它不會像行內元素那樣表現爲不是所期望的結果..謝謝 – kfiroo 2010-06-24 13:59:59

Marcel：1.我知道元素和標記之間的區別 - 抱歉不完美。 2。是的，但是正如您所看到的，它會在不同的瀏覽器中引發問題，有時可以通過我的建議來避免，因爲我經常使用它。 kfiroo：好吧，我以爲你希望它的行爲像塊元素，因爲你是在背景和填充。 – 2010-06-24 14:03:57

內聯塊本來是一個更明智的選擇，我認爲無論如何... – Chris 2010-06-24 14:11:29

，似乎是在IE開發工具中的錯誤，其中顯示的代碼只是狼吞虎嚥下一個非背景定義（按字母順序排列，顯然），如果你有背景圖像分開指定。你的文本在任何一個鏈接上的頁面上都沒有與你的背景圖像重疊，所以對我來說，似乎CSS正在被正確解釋;你能解釋爲什麼你認爲情況並非如此嗎？

我不知道他們是如何創建一個錯誤，但如果你想讓它消失，指定背景定義在速記似乎沒有表現出這種行爲：

background:transparent url("images/bullet-green.gif") scroll no-repeat left center;

來源

2010-06-24 14:21:49

感謝您的重播。在這個演示中，它真的好像是正確解釋的CSS，但在我的製作網站上的文字和bg-img重疊..我會嘗試將bg規則合併到一個單一的 – kfiroo 2010-06-24 14:36:01

好！那工作。生病嘗試在現場直播版本。非常感謝 – kfiroo 2010-06-24 14:38:00

很酷的東西。如果您在將它放回生產站點時遇到問題，我認爲樣式表中的其他位置必須存在衝突規則。 – 2010-06-24 15:00:11

IE瀏覽器的CSS錯誤：它將'填充左'附加到'背景圖像'的末尾？

回答

相關問題