css - div "top"错误 IE 和其他一切。大问题

Question

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

我正在我的网站内容所在的位置制作 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 类中没有顶部，则在 IE 中一切正常，但在其他浏览器中没有空间。如果我放回顶部:50px；在 .content_IE 类中还有其他 50px 的填充。我的意思是页面看起来像我把 top:50px;和 padding-top=50px;.我已经尝试了一切，例如 margin-top:-50px;填充顶部:-50px；像这样的东西，但我还在圈子里。只有在 .content 类中没有 top 选项时，它看起来才不错。请帮忙。

Answer 1

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

(这可能有点冗长，但它提供了一些合理的策略来防止将来出现此类问题):

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

首先，一些风格/策略建议:

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

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

   <style>
       .content {
           background: #fff;
           height: 550px;
           width: 990px;
           position: relative;
           float: left;
           top: 50px;
       }
   </style>
   <!--[if IE 7]>
   <style>
       .content {
           height: 750px;
       }
   </style>
   <![endif]-->
   

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

现在，就 z-index 问题而言 - 我建议将 z-index 应用到您试图放置在内容“顶部”的图像上，并使用正值。这应该可以防止某些我认为您在 IE 中看到的情况发生(IE 通常会出现负值问题，因此请尽可能避免它们)。

如果这解决了问题，请继续使用您的代码，这样您就不再需要条件 CSS。