IE7的CSS問題？

我在IE7中顯示以下頁面時出現問題。IE7的CSS問題？

http://townappliance.arosavd.com/index.php/barbeques/natural-gas.html

每個產品具有：

<div>用於與背景圖像的頂部。
<li>與背景圖像的中間。
<div>底部有背景圖像。

<li>有一個背景重複：repeat-y;它似乎並沒有停在正確的地方。如果你沒有IE7，複製上面的鏈接，並使用此頁面看看吧：

http://ipinfo.info/netrenderer/index.php

在此先感謝，
逾越節

來源

2011-08-03 pzirkind

在Safari中，你有一個水平滾動條在不需要一個。你的網頁也被加載並且我認爲它崩潰了我的瀏覽器。有一堆控制檯錯誤...包括樣式表上的404等。正如下面的答案中所解釋的，你有一些無效的代碼。（http://validator.w3.org/check?uri=http%3A%2F%2Ftownappliance.arosavd.com%2Findex.php%2Fbarbeques%2Fnatural-gas.html&charset=% [通過W3C驗證看看你的頁面] 28detect +自動％29＆doctype =內聯＆組= 0）並修復所有錯誤。 – Sparky

你可以改變你的UL李裏你的div。

<ul> 
    <li class="top"></li> 
    <li> item here </li> 
    <li class="bottom"></li> 
</ul>

或考慮將您的div移出ul。

來源

2011-08-03 19:48:53 kechapito

非常感謝你們兩個！ – pzirkind

你的答案不僅解決問題，還教我爲什麼發生問題（再加上更好的HTML做法）再次感謝 – pzirkind

您的標記是無效的，IE7被重新安排它，也許其他瀏覽器正在對它做出更好的「最佳猜測」。

<ol> 
    <div /><!-- top --> 
    <li /> 
    <div /><!-- bottom --> 
</ol>

是被重新格式化爲：

<ol> 
    <li> 
     <div /><!-- top --> 
     <div /><!-- bottom --> 
    </li> 
</ol>

你必須重新排列HTML;只有一個LI可以是OL的孩子，而不是DIV（或者是SPAN或H2，它們也是OL的直接後代）。

我建議改變UL和李只的DIV（保持ID和班級相同）。這樣標記不再無效。列表元素在這裏並不是必須的，因爲列表中的每個項目都非常大，並且是塊級別的。此外，這將是一個更快的修復比實際重新排列列表，以便它是有效的（這將需要顯著CSS更新太）

希望幫助！

來源

2011-08-03 19:35:28

IE7的CSS問題？

回答

相關問題