Question

任何人都可以告诉我为什么在{7}的右上角绝对定位的导航按钮在ie7中不可见，但在所有其他浏览器（包括ie8和9）中工作正常

谢谢！

Answer 1

对于使用IE7或以下未正确支持的display:inline-block的人（有时它可以正常工作，有些则不行 - 取决于元素和情况）。

使用display:block和float:left取而代之的是支持更多（但如果您看到我的第一个链接，您也可以使用display:inline 。

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

的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>

有用的链接：

http://aaronrussell.co.uk/legacy/cross-browser-support-for-inline-block/
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宽度为3000像素，因此会导致您的右侧元素从屏幕边缘消失。

以下css应该修复它：

#innerWrap { width: 100%; }

Answer 2

使用左侧或右侧属性以使其可见。

在ie7中看不到绝对定位的元素

2 个答案:

更新

更新