Question

Inzu网站的菜单系统在IE 9中不起作用。在每个li元素之间a＆＃34;分支＆＃34;在CSS中生成图形以将li元素与间隙和小连接器分开。

在包括IE 11在内的所有其他浏览器中，菜单工作正常，但在IE 9中，当鼠标悬停在间隙上时，菜单消失，鼠标悬停在连接器图形上就可以了。

这是HTML：

<ul class="nav">
<li class="section_1"><a href='about.php?section=section_1&id=About'>About the BSCB</a>
<ul class="submenu">
<li><a href='page.php?section=section_1&id=266'>Structure and Governance</a></li>
<li><a href='page.php?section=section_1&id=265'>BSCB Membership</a></li>
</ul>
</li>
</ul>

这就是CSS

.section_1{
  background-color: #a30046;
}

.nav {
  height: 47px;
  font-family: "Arial Rounded MT Bold", Arial, Helvetica, sans-serif;
}
.nav li {
  position: relative;
  float: left;
  margin: 0 0 0 6px;
  width: 115px;
  min-height: 39px;
}
.nav li:first-child {
  margin-left: 0;
  width: 117px;
}
.nav li a {
  display: block;
  width: 100%;
  padding: 4px 6px;
  color: #fff;
  font-size: 1.2em;
  line-height: 1.2em;
  text-decoration: none;
}
.nav li .submenu {
  display: none;
  position: absolute;
  top: 39px;
}
.nav li .submenu li {
  width: 115px !important;
  margin: 0;
  padding: 6px 0 0 0;
  min-height: 45px;
}
.nav li .submenu li a {
  min-height: 39px;
}
.nav li .submenu li a:before {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -3px;
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background-color: inherit;
}

连接器是使用最后一个块创建的，这可以在http://www.bexleylscb.org.uk

中看到

Answer 1

通过使用透明的PNG设置列表元素的背景，问题就消失了。

Inzu - IE 9无法识别菜单项的全高

1 个答案: