Question

代码：

    <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 OK; Internet Explorer 6/7，忽略:(

甚至尝试过：

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

知道我做错了吗？

看一下图片

Firefox View IE view: the div its not top:-15px or bottom:30px :?

Answer 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;
}

Answer 2

#enlacesSeo是指ID，而不是类。 .enlacesSeo会定位该课程。

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

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

2 个答案: