Question

我创建了一个CSS下拉菜单，但它在IE中无效。但是，在Firefox和Chrome中，它完美运行。我想知道代码中的缺陷是什么使它在IE中不起作用！请帮忙！.........

＆＃13;

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  float: left;
  left: 40%;
  display: inline;
}
ul li {
  display: block;
  position: relative;
  float: left;
  left: 85px;
}
li ul {
  display: none;
  margin: 0;
}
ul li a {
  display: block;
  background: #660000;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  border-left: 1px solid #660000;
  border-right: 1px solid #660000;
}
ul li a:hover {
  background: #3300cc;
  margin: 0;
}
li:hover ul {
  display: block;
  position: absolute;
  margin: 0;
}
li:hover li {
  float: none;
}
li:hover a {
  background: #3300cc;
}
li:hover li a:hover {
  background: #660000;
}
.drop-nav li ul li {
  border-top: 0px;
  position: relative;
  padding: 0px;
  z-index: 100;
  border-bottom: 0px;
  margin: 0;
  right: 0;
  left: 0;
}
li li:hover a {
  display: block;
}
li li ul a {
  display: none;
  border-left: 1px solid #660000;
  margin-left: 60px;
  margin-top: -30px;
  margin-bottom: 30px;
}
li:hover li:hover ul li a:hover {
  background: #660000;
  margin-top: -30px;
  margin-bottom: 30px;
  margin-left: 60px;
  border-left: 1px solid #660000;
}

＆＃13;

<div class="nav">
  <ul class="drop-nav">
    <li><a href="item1.html">Item 1</a>
    </li>
    <li><a href="#">Item 2</a>

      <a href="item2_sub_1.html">Item 2 sub 1</a>
    </li>
    <li><a href="item2_sub_2.html">Item 2 sub 2</a>
    </li>
    <li><a href="item2_sub_3.html">Item 2 sub 3</a>
    </li>
  </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Item 3 sub 1 &raquo;</a>
        <ul>
          <li><a href="item3_sub_1_1.html">Item 3 sub 1.1</a>
          </li>
          <li><a href="item3_sub_1_2.html">Item 3 sub 1.2</a>
          </li>
          <li><a href="item3_sub_1_3.html">Item 3 sub 1.3</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Item 3 sub 2 &raquo;</a>
        <ul>
          <li><a href="item3_sub_2_1.html">Item 3 sub 2.1</a>
          </li>
          <li><a href="item3_sub_2_2.html">Item 3 sub 2.2</a>
          </li>
          <li><a href="item3_sub_2_3.html">Item 3 sub 2.3</a>
          </li>
        </ul>
      </li>
      <li><a href="item3_sub_3.html">Item 3 sub 3</a>
      </li>
      <li><a href="item3_sub_4.html">Item 3 sub 4</a>
      </li>
      <li><a href="item3_sub_5.html">Item 3 sub 5</a>
      </li>
    </ul>
  </li>
  <li><a href="item4.html">Item 4</a>
  </li>
  <li><a href="#">Item 5</a>
    <ul>
      <li><a href="item5_sub_1.html.html">Item 5 sub 1</a>
      </li>
      <li><a href="item5_sub_2.html.html">Item 5 sub 2</a>
      </li>
    </ul>
  </li>
  <li><a href="item6.html">Item 6</a>
  </li>
  <li><a href="item7.html">Item 7</a> 
  </li>
  <li><a href="item8.html">Item 8</a> 
  </li>
  </ul>
</div>

＆＃13;

Answer 1

将此添加到您的html文件。<meta http-equiv="X-UA-Compatible" content="IE=9"/>，并确保使用<!DOCTYPE HTML>

Answer 2

对于这些类型的错误，只需转到开发人员工具，看看是否可以找到任何css编译错误。我还没有模拟你的情景。

但是我遇到过像你面临的类似问题。有些样式在Firefox和Chrome中运行良好，但不是IE和边缘。

当我在IE中检查元素时，由于某些原因，某些样式存在一些语法错误。我不能完全回想起那种风格。但假设以下是有问题的风格。

font-size：16p;

这可能被解释为＆＃34; font-size：16px＆＃34;或者在Chrome和Firefox中可能会忽略此语法错误，但IE可能会捕获它们并且可能不会应用该样式。

这可能是造成这类问题的原因。我的建议是检查开发人员工具中有问题的样式并解决它们。

为什么CSS下拉菜单在IE中不起作用

2 个答案: