0

谁能告诉我为什么这个页面右上角的绝对定位导航按钮在ie7 中不可见，但在所有其他浏览器（包括 ie8 和 9）中都可以正常工作

谢谢！

4

2 回答 2

1

对于您正在使用display:inline-block的 IE7 或更低版本未正确支持的应用程序（有时它可以工作，而另一些则不能 - 取决于元素和情况）。

使用display:blockandfloat:left代替，因为这更受支持（但是，如果您看到我的第一个链接，您也可以使用display:inline）。

不要忘记包含overflow:hidden在周围的 UL 元素中，否则由于浮动，您会得到奇怪的结果。

CSS：

#navlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
}

#navlist li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  float: left;
  /* your styles from before */
  background-color: #F2F2F2;
  border-radius: 5px 5px 5px 5px;
  color: black;
  height: 20px;
  padding-top: 2px;
  text-align: center;
  width: 20px;
}

标记：

<ul id="navlist">
  <li id="li1">
    <a id="link1" href="#">1</a>
  </li>
  <li id="li2">
    <a id="link2" href="#">2</a>
  </li>
  <li id="li3">
    <a id="link3" href="#">3</a>
  </li>
  <li id="li4">
    <a id="link4" href="#">4</a>
  </li>
 </ul>

有用的链接：

  1. http://aaronrussell.co.uk/legacy/cross-browser-support-for-inline-block/
  2. http://www.quirksmode.org/css/display.html#t03

更新：

您可以尝试的另一件事（如果上述方法不能解决问题）是暂时删除 IE7 的条件注释代码 - 只是为了确保其中没有任何问题导致问题：

<!--[if IE 7]>
  <link rel="stylesheet" type="text/css" href="css/ie7.css" />
  <script type="text/javascript" src="Scripts/ie7.js"></script> 
<![endif]-->

更新：

现在我已经能够在 IE7 中进行实际测试，如果启用边框，问题就会出现 - 使用 css 边框进行调试总是一个好主意:) 上面的问题是由一个子元素推出的宽度引起的你的父母元素innerWrap。这不会影响更现代的浏览器，但是 IE7 和更早版本总是尝试包装他们的孩子，无论它们放在哪里或它们的大小是多少（除非您覆盖此行为）。因为你的子元素slideWrap是 3000px 宽，它会导致你的右定位元素从屏幕边缘消失。

以下css应该修复它：

#innerWrap { width: 100%; }
于 2012-10-23T16:30:45.793 回答
0

使用 left 或 right 属性以使其可见。

于 2012-10-23T16:30:28.247 回答