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的填充。我的意思是页面看起来像我放顶：50px;和padding-top = 50px;。我尝试过像margin-top这样的东西：-50px;填充顶：-50px;和这样的东西，但我仍然在圈子里。只有在 .content 类中没有顶部选项时，它才会显示正常。请帮忙。

Answer 1

问题在于两个div不是互斥的 - IE会看到你的.content和.content_IE div，而你试图设置的定位是由内部控制的。 content div（因为它们都应用了position: relative）。尝试从代码中删除.content div并在IE中查看它，您可能会在其他浏览器中看到相同的问题。（有关详细信息，this article涵盖了很好的定位）

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

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

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

不要使用内联样式（你在.content和.content_IE类上设置的高度），因为你通过CSS设置其他样式属性（如宽度），这就更没意义了。我可以看到这样做的唯一原因（即使那时我仍然建议不要这样做）就是你正在用Javascript做些什么。

对于IE特定的声明，更好的方法是设置样式，以便您可以处理Cascade - 在.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了。

Answer 2

IE z-index存在一些错误，但你所描述的并不像其中一个，你必须做一些奇怪的事情。你能举个例子吗？我问，因为如果可以的话，我会尽量避免使用像这样的条件。

但这是你简短而温馨的答案：

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

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

div“top”错误IE和其他一切。大问题

2 个答案: