HTML 和 CSS 在 Chrome 和 Firefox 中运行良好，但在 IE7 中无法运行答案

【问题标题】：HTML and CSS works fine in Chrome and Firefox but not IE7HTML 和 CSS 在 Chrome 和 Firefox 中运行良好，但在 IE7 中无法运行
【发布时间】：2011-09-30 03:10:31
【问题描述】：

我目前正在为 Google 协作平台开发一个站点，并希望将下面的 HTML 作为小工具嵌入，以显示我自己的自定义菜单栏。我不是 HTML 或 CSS 专家，所以我从教程中获取了这个示例代码并尝试自己使用它。问题是它在 Firefox 和 Chrome 中运行良好，但在 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>

【问题讨论】：

ietester: my-debugbar.com/wiki/IETester/HomePage
不幸的是，分析此类问题的最有效工具是开发人员。然而，有大量关于破坏 CSS 的方式的信息。恕我直言，最好的来源之一是quirksmode

标签： html css internet-explorer

【解决方案1】：

IE7及以下的visibility有些问题。

因此，这些样式可能会导致您出现错误：

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

您可以在这里阅读更多内容：http://reference.sitepoint.com/css/visibility

【讨论】：