位置相对顶部/底部忽略 Internet Explorer 6/7答案

【问题标题】：position relative top/bottom ignored internet explorer 6/7位置相对顶部/底部忽略 Internet Explorer 6/7
【发布时间】：2011-08-16 21:09:11
【问题描述】：

代码：

    <div class="container_16" id="enlacesSeo">
        <div id="titulo_destinos">
            <h2>PRINCIPALES DESTINOS</h2>
        </div>
        <div id="destinos">
            <ul class="enlacesSeo">             
                <li>Items</li>
                                <li>Items</li>
            </ul>
        </div>
    </div>
    <div class="clearfix"></div>

CSS：

*Enlaces principales destinos - SEO */
#enlacesSeo {
    border-bottom: 1px solid #DDD;
    height:50px;
    position:relative; top:-15px;
    margin-bottom:5px;



}
* html .enlacesSeo {
    /*hack IE6*/
     position: relative;
     bottom: 30px;
}

*+html #enlacesSeo {
    bottom: 30px;
}

#enlacesSeo div#titulo_destinos{
    float:left;
    width:179px;
    border-right: 1px solid #ddd; 
}

Firefox、chrome 和 Opera 都可以； Internet Explorer 6/7，忽略 :(

甚至尝试过：

* html .enlacesSeo {
    /*hack IE6*/
     position: relative;
     bottom: 30px;
}

知道我做错了什么吗？

看看图片

【问题讨论】：

请发布您的整个 HTML 和 CSS。

标签： css internet-explorer positioning

【解决方案1】：

如果您有position: relative 和top 和bottom，则top 胜出，因此如果要设置bottom 值，则需要先设置top: auto。

所以，在你的情况下，它会是

* html #enlacesSeo {
    /*hack IE6*/
     top: auto;
     position: relative;
     bottom: 30px;
}

*+html #enlacesSeo {
    top: auto;
    bottom: 30px;
}

【讨论】：

【解决方案2】：

#enlacesSeo 指的是一个 ID，而不是一个类。 .enlacesSeo 将针对该类。

* html .enlacesSeo 永远不会定位任何对象，因为<html> 没有父元素。

【讨论】：

@Toni Michel Caubet：我在向@Tomalak 解释* html 做了什么。
@thirtydot 谢谢，不知道。不过，我可能会立即忘记。 ;-)
啊哈，好的！我让它与 margin-top:-15px 一起工作；你认为这是一个好的解决方案吗？？