我正在研究的网站www.flynntec.com遇到IE8问题。我假设它也发生在6和7。 Firefox / Chrome都运行良好。
我在CSS3下拉列表（Excel）中有两个广告，当IE将鼠标悬停在广告上时，下拉列表会关闭。 IE8可以将鼠标悬停在下拉菜单中的所有其他位置，但只要它击中广告，下拉菜单就会立即关闭。
有什么想法吗？
已添加代码
HTML 的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Microsoft Office Tutorials - Excel, Word, PowerPoint, Access" />
<title>Microsoft Office Tutorials - Excel, Word, PowerPoint, Access</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-image: url(media/background.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div align=center id="container">
<div id="banner"><img src="media/banner.jpg" width="800" height="120" alt="Microsoft Office Tutorials Banner" /></div>
<div id="content">
<ul id="menu">
<li><a href="#" class="drop">Home</a><!-- Begin Home Item -->
<div class="dropdown_2columns"><!-- Begin 2 columns container -->
<div class="col_2">
<h2>Microsoft Office Tutorials</h2>
</div>
<div class="col_2">
<p>This site is dedicated to training people to use Microsoft Excel, Word, PowerPoint and Access. Whether you're just beginning or a professional, there are resources here for you.</p>
<p>Our philosophy is different. We have created our own tutorials, but we've also leveraged the power of the internet to gather the world's best training tutorials on the Microsoft Office Suite.</p>
</div>
<div class="col_2">
<h2>Our Philosophy</h2>
</div>
<div class="col_1">
<img src="media/FreeMini.jpg" alt="Always Free" width="125" height="48" vspace="10" />
</div>
<div class="col_1">
<p>We are dedicated to providing you the best information. <b>Always Free </b></p>
</div>
</div><!-- End 2 columns container -->
</li><!-- End Home Item -->
<li><a href="#" class="drop">Excel</a><!-- Begin Excel Item -->
<div class="dropdown_5columns"><!-- Begin ExcelContainer -->
<div class="col_5">
<h2>Microsoft Excel</h2>
</div>
<div class="col_1"> <h3>Overview</h3>
<p class="black_box">Microsoft Excel is the world's most popular spreadsheet creation tool.</p>
</div>
<div class="col_1">
<ul class="greybox"><h3>Beginner</h3><li><a href="#">Welcome to Excel</a></li>
<li><a href="#">Calculations</a></li>
<li><a href="#">Functions and Formulas</a></li>
<li><a href="#">Formatting</a></li>
<li><a href="#">Creating Charts</a></li>
<li><a href="#">More...</a></li>
</div>
<div class="col_1">
<ul class="greybox"><h3>Intermediate</h3><li><a href="#">Freezing Panes</a></li>
<li><a href="#">The =IF Formula</a></li>
<li><a href="#">Conditional Formatting</a></li>
<li><a href="#">The Date in Excel</a></li>
<li><a href="#">Drop-Down Lists</a></li>
<li><a href="#">More...</a></li>
</div>
<div class="col_1">
<ul class="greybox"><h3>Advanced</h3><li><a href="#">Using =VLOOKUP</a></li>
<li><a href="#">Pivot Tables</a></li>
<li><a href="#">Using the Goal Seek Feature</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Macros</a></li>
<li><a href="#">More...</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox"><h3>Sponsor</h3><p><script type="text/javascript"><!--
google_ad_client = "ca-pub-1357665793080808";
/* Support */
google_ad_slot = "8875829615";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script> </p>
</div>
<div class="col_1">
<p></p>
</div>
<div class="col_5">
<h2>Additional Free Resources</h2>
</div>
<div class="col_3">
<img src="media/youtube-logo.jpg" alt="YouTube Picture" name="youtube" width="90" height="70" class="img_left imgshadow" id="youtube" />
<p>If you prefer to learn visually, YouTube is the best free source for Excel tutorials in the world. We have compiled the best, most popular Excel tutorials from YouTube and put them here for your convenience. </p>
<br />
<a href="http://office.microsoft.com/en-us/training-FX101782702.aspx" target="_blank"><img src="media/microsoft-logo__111129012732.jpg" alt="" name="microsoft" width="90" height="24" class="img_left imgshadow" id="microsoft" /></a>
<p><a href="http://office.microsoft.com/en-us/training-FX101782702.aspx" title="Microsoft Training" target="_blank">Microsoft has some of the best tutorials in the world listed on their website. Microsoft Training can be found here.</a></p>
<br />
</div>
<div class="col_5">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1357665793080808";
/* Excel CSS3 Dropdown */
google_ad_slot = "0975939945";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div><!-- End Excel container -->
</li><!-- End Excel Item -->
CSS
@charset "utf-8";
/* CSS Document */
#container {
}
#banner img{
border:7px solid #FFF;
border-radius: 7px;
-moz-border-radius: 7px
-webkit-border-radius: 7px;
}
#banner {
padding-bottom: 0px;
}
#content {
}
#footer {
}
#menu {
list-style: none;
width: 774px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #003910;
background: -moz-linear-gradient(top, #FFF, #003910);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#003910));
-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
border: 1px solid #FFF;
}
#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}
#menu li:hover {
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
border: 1px solid #777777;
padding: 4px 9px 4px 9px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
color: #161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right: 21px;
background: url(media/drop.png);
background-repeat: no-repeat;
background-position: right 8px;
}
#menu li:hover .drop {
background: url(media/drop.png);
background-repeat: no-repeat;
background-position: right 7px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;
/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;top:auto;
}
.dropdown_1column {width: 146px;}
.dropdown_2columns {width: 284px;}
.dropdown_3columns {width: 422px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 740px;}
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
#menu .menu_right {
float:rightright;
margin-right:0px;
}
#menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
left:auto;
right:-1px;
top:auto;
}
#menu p, #menu h2, #menu h3, #menu ul li {
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
font-size:12px;
text-align:left;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
font-size:21px;
font-weight:400;
letter-spacing:-1px;
margin:7px 0 14px 0;
padding-bottom:14px;
border-bottom:1px solid #666666;
}
#menu h3 {
font-size:14px;
margin:7px 0 14px 0;
padding-bottom:7px;
border-bottom:1px solid #888888;
}
#menu p {
line-height:18px;
margin:0 0 10px 0;
}
.strong {
font-weight:bold;
}
.italic {
font-style:italic;
}
#menu li:hover div a {
font-size:12px;
color:#015b86;
}
#menu li:hover div a:hover {
color:#029feb;
}
#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}
.imgshadow {
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.img_left {
width:auto;
float:left;
margin:5px 15px 5px 5px;
}
#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;
/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}
<!--[if IE 6]>
<style>
body {behavior: url("csshover3.htc");}
</style>
<![endif]-->
谢谢！
答案 0 :(得分：0)
此问题是由Flash对象上的特定wmode设置引起的。对于您所追求的内容，您需要wmode为opaque，而不是window，direct，gpu或默认值。但是，由于您使用的是Google广告，因此您无法控制内容（由于跨域问题，您甚至无法使用JavaScript进行更改）。这可能是谷歌的一部分，是为了防止用户通过用另一个元素覆盖广告来隐藏广告，但在尝试合法地拥有任何内容时会感到沮丧。
我可以提出的最佳建议是，在显示菜单时让广告的容器将其visibility样式更改为hidden，然后将其更改回visible 。它看起来很混乱，但至少它不会在你的实际内容之上处理。