0

所以我只使用 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 悬停下拉插件，我也遇到了同样的问题。

4

2 回答 2

0

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

于 2013-09-11T15:07:01.363 回答
0

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

<meta http-equiv="X-UA-Compatible" content="IE=edge">
于 2013-09-13T09:57:57.860 回答