HTML和CSS在Chrome和Firefox中運行良好，但不支持IE7

我正在爲Google協作平臺開發一個站點，並且希望將下面的HTML嵌入到小工具中以顯示我自己的自定義菜單欄。我不是HTML或CSS專家，所以我從教程中獲取了這個示例代碼並嘗試自己使用它。問題是，它在Firefox和Chrome中可以正常工作，但不能在IE7中正常工作。HTML和CSS在Chrome和Firefox中運行良好，但不支持IE7

解決這些類型問題的最佳方法是什麼？是否有任何工具可以在IE中執行分析並讓我知道這個問題？

感謝

<style type="text/css"> 
body {background-color:transparent} 
.outer {display:block} 
.outer img {width:100%; height:100%; border:0} 
html>body .outer img {display:block} 
.outer a:hover {visibility:visible} 
.outer a:hover img {visibility:hidden} 
#home {background-image:url(https://lh4.googleusercontent.com/-SM4Zlc_m4sE/ToUeELn6dYI/AAAAAAAAAA4/srLee9XEP5s/HomeOnHoverMenuTile.png)} 
#news {background-image:url(https://lh4.googleusercontent.com/-UKhdMKoFs1o/ToUryay5cbI/AAAAAAAAACk/Fq4BprNrKYQ/NewsOnHoverMenuTile.png)} 
#history {background-image:url(https://lh3.googleusercontent.com/-b41VthyFbjM/ToUeEYy8PQI/AAAAAAAAAA8/zTlQLkQaxrQ/HistoryOnHoverMenuTile.png)} 
#clubgear {background-image:url(https://lh4.googleusercontent.com/-ihsPwNu_f6s/ToUeEPSC2XI/AAAAAAAAAA0/G-B6SVXR2DY/ClubGearOnHoverMenuTile.png)} 


</style> 
<base target="_parent"> 

<table align="center" style="background-color:#FFFFFF" cellpadding="0" cellspacing="0"> 
<tbody> 
<tr> 

<td><div class="outer" id="home"><a href="http://www.google.ie"><img src="https://lh5.googleusercontent.com/-p2m5ub3oghM/ToUqR7X0x-I/AAAAAAAAABo/5YYOpHVrN5E/HomeMenuTile.png"></a></div></td> 
<td><div class="outer" id="news"><a href="http://www.google.ie"><img src="https://lh5.googleusercontent.com/-gZbD2wwe3no/ToUqRzW8KcI/AAAAAAAAABk/wErW3cRYDT0/NewsMenuTile.png"></a></div></td> 
<td><div class="outer" id="history"><a href="http://www.google.ie"><img src="https://lh6.googleusercontent.com/-iRj10FazPSs/ToUqR82toZI/AAAAAAAAABg/3zOlviqH_ig/HistoryMenuTile.png"></a></div></td> 
<td><div class="outer" id="clubgear"><a href="http://www.google.ie"><img src="https://lh4.googleusercontent.com/-4hwFSaBOUh4/ToUeE1XbIYI/AAAAAAAAABI/ngtqhT5gcIE/ClubGearMenuTile.png"></a></div></td> 


</tr> 
</tbody> 
</table>

來源

2011-09-30 DJ180

ietester：http://www.my-debugbar.com/wiki/IETester /主頁 – checkenginelight

不幸的是，分析這類問題最有效的工具是開發人員。然而，關於一些破壞CSS的方式有大量的信息。最好的來源之一，恕我直言，是[quirksmode]（http://www.quirksmode.org/） – Maciej

IE7和下面的牙齒有問題visibility。這裏

.outer a:hover {visibility:visible} 
.outer a:hover img {visibility:hidden}

你可以閱讀更多：

因此，這些樣式可能會導致錯誤你http://reference.sitepoint.com/css/visibility

來源

2011-09-30 03:43:55

HTML和CSS在Chrome和Firefox中運行良好，但不支持IE7

回答

相關問題