div“顶部” bug IE 和其他一切。大问题

Question

我是 CSS 新手，所以请帮助我解决这个问题。我希望能够正确地描述它。

我正在我的网站内容所在的位置制作名为 content 的 div。我用 z-index:-1; 做了它所以一个图像要放在这个 div 上。但在 Chrome、FF 和 Safari 中，内容变得不活跃。我无法选择文本、单击链接并在表格中写入。所以我尝试在 z-index 中使用正状态，但 IE 不知道这意味着什么。该死。所以我决定制作条件div。这是代码：

.content
{
    background:#FFF;
    width:990px;
    position:relative;
    float:left;
    top:50px;
}
.content_IE
{
    background:#FFF;
    width:990px;
    position:relative;
    float:left;
    top: 50px;
    z-index:-1;
}

这是 HTML：

<!--[if IE 7]>
    <div class="content_IE" style="height:750px;">
        <![endif]-->
            <div class="content" style="height:550px;">

z-index 一切都很好，但问题是，如果 .content 类中没有 top，一切在 IE 中看起来都很好，但在其他浏览器中没有空格。如果我放回顶部：50px； .content_IE 类中还有其他 50px 的填充。我的意思是，该页面看起来像是我放置了 top:50px;和 padding-top=50px;。我已经尝试了像 margin-top:-50px; 这样的一切顶部填充：-50px；诸如此类的事情，但我仍然在圈子里。仅当 .content 类中没有 top 选项时，它看起来才正常。请帮忙。

Answer 1

问题在于，这两个 div 并不相互排斥 - IE 会同时看到您的 .content 和 .content_IE div，并且您尝试设置的位置由 Interior 控制。 content div（因为两者都应用了 position:relative）。尝试从代码中删除 .content div 并在 IE 中查看它，您可能会看到在其他浏览器中遇到的相同问题。 （有关更多信息，这篇文章很好地介绍了定位）

（这是也许有点冗长，但它提供了一些合理的策略来防止将来出现此类问题）：

这里发生了一些事情：IE 特定的处理和 z-index 问题。

首先，一些样式/策略建议：

1. 不要使用内联样式（您在 .content 和 .content_IE 类上设置的高度），这更没有意义，因为您通过设置其他样式属性（如宽度） CSS。我认为这样做的唯一原因（即使如此，我仍然建议反对它）是如果你正在使用 Javascript 做一些事情。

2. 对于特定于 IE 的声明，更好的方法是设置样式，以便您可以处理级联 - 在 .content 类上设置基本样式（高度、宽度等），然后应用IE 的具体规则很少（例如不同的高度）。它看起来像这样：

   <前><代码><样式>
   。内容 {
   背景：#fff；
   高度：550px；
   宽度：990px​​；
   位置：相对；
   浮动：向左；
   顶部：50 像素；
   }
   
   

这样你应该会体验到 a) 更少的潜在怪异，以及 b) 更容易维护你的代码。如果您的样式表足够大，请将规则分成两部分（例如“main.css”和“ie7.css”），然后从条件注释内部链接到 IE 规则。

现在，就 z-index 而言问题是 - 我建议在您尝试放置在内容“顶部”的图像上应用 z-index，并使用正值，这应该可以防止我认为您在 IE 中看到的一些情况。 （IE 通常会出现负值问题，因此如果可以的话请尽量避免）

。

Answer 2

IE z-index 有几个错误，但您所描述的听起来不像其中之一，您一定在做一些奇怪的事情。你能举个例子吗？我这么问是因为如果可以的话我会尽量避免使用这样的条件。

但这是您简短而甜蜜的答案：

.content
{
  background:#FFF;
  width:990px;
  position:relative;
  float:left;
  top:50px;
  *top: 0px;
}

基本上，我们有条件地将 IE 的 .content top 设置为 0px。