Question

所以我使用CSS和HTML创建了一个“下拉按钮”，它在Chrome和FireFox中运行得非常好。但是，在IE中，“新发票”按钮在悬停时没有任何作用，并且定位很奇怪。知道为什么会这样吗？

以下是Chrome中的屏幕截图：http://imgur.com/ZqjS1i4,cuLuNtj
在IE中：http://imgur.com/ZqjS1i4,cuLuNtj#1

这是我的CSS：

<style type="text/css">
    .dropdownbutton ul ul { display: none; width:135px; }
    .dropdownbutton ul li:hover ul { display: block; }
    .dropdownbutton ul { list-style: none; position: relative; display: inline-table; }
    .dropdownbutton ul li:hover a { color: #000000; font-weight:800; }
    .dropdownbutton ul li a { display: block; text-decoration: none; }
    .dropdownbutton ul ul { background: #9799cc; padding: 0; position: absolute; top: 100%; }
    .dropdownbutton ul ul li { float: none; border-top: 1px solid #4b545f; position: relative; }
    .dropdownbutton ul ul li a { padding: 5px 5px; }
    .dropdownbutton ul ul li a:hover { background: #6d70aa; }
</style>

我的HTML：

<div class="dropdownbutton">
  <ul>
    <li>
      <input type="button" class="innerButton" value="New Invoice &#x25BC;" />
      <ul>
        <li><a href="#" onclick="DoNewInvoiceClick('1');">New General...</a></li>
        <li><a href="#" onclick="DoNewInvoiceClick('2');">New Percent...</a></li>
        <li><a href="#" onclick="DoNewInvoiceClick('4');">New Retention Claim...</a></li>
      </ul>
    </li>
  </ul>

另外，我尝试过使用Bootstrap hover下拉插件，我遇到了同样的问题。

Answer 1

将vertical-align:top添加到列表项。

Answer 2

检查您是否处于兼容模式。 IE10应该正确显示。尝试将其放在网站的<head>部分，以禁用兼容模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

按钮在IE中无法正常工作？

2 个答案: