div 在 IE 和 Opera 中没有正确定位？答案

【问题标题】：div not positioning correctly in IE and Opera?div 在 IE 和 Opera 中没有正确定位？
【发布时间】：2013-02-15 11:21:26
【问题描述】：

我有一个带有丝带背景图像的 div。我想将我的 div 与功能区背景放在另一个 div (div 2) 上，所以看起来功能区缠绕在第二个 div 周围。

现在这在 Chrome 和 safari 中运行良好，我不得不为 firefox 使用辅助 css 设置，但 IE 和 Opera 都显示我的功能区 div 比在 chrome 或 safari 中高约 25 像素。

我不知道为什么会这样，而且我似乎无法让它不做正确的位置（我只需要在这两个浏览器中以某种方式将它向下移动大约 25px）

(div 1)
<div class="side-ribbon4"><img src="assets/img/sidebar/1.png" width="118" height="118" /></div>

div 1 css：

.side-ribbon4 {
    width:28px;
    height:21px;
    margin-left:111px;
    padding-right:0px;
    float:right;
    text-align:center;
    margin-top:2273px;
    position:absolute;
    z-index:30;


}

我把它放在这个 div 的顶部（div 2）

div 2 css：

.categories-box2 {
    width: 200px;
    float: left;
    border:solid;
    border: 1px solid #cccccc;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url(border-radius.htc);
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    margin-bottom: 30px;
    margin-top:10px;
    margin-left: 20px;
    text-align: center;
    background-color: #FFF;
    /* [disabled]margin-left: 30px; */
    overflow: hidden;
    padding-top: 20px;
    padding-bottom: 20px;
    position:relative;


}

【问题讨论】：

标记中的.side-ribbon4 是否位于.categories-box2 中？
不，它不是在外面
这是一个小提琴。我去掉了大得离谱的上边距，但效果应该是一样的。我不确定你在追求什么。 jsfiddle.net/ZnRSm/1
题外话，但 Opera 刚刚表示他们正在迁移到 WebKit，因此您可以少担心一个浏览器...

标签： html css positioning css-position

【解决方案1】：

http://jsfiddle.net/ZnRSm/3/

.side-ribbon4 {position: relative;}
.categories-box2 {position: absolute;}

<div class="side-ribbon4">
    <img src="http://placehold.it/118x118" width="118" height="118" />
    <div class="categories-box2">&nbsp;</div>
</div>

您需要研究一下 CSS 定位以及为什么它通常不应该与浮动结合使用。一方面，绝对定位的元素通常放置在（因此相对于）相对定位的元素内部。

另一个提示是，如果您遇到此类问题，即浏览器以不同方式呈现您的布局，则可能意味着您的布局不好。 IE9+、Firefox、Chrome 和 Safari 都非常符合标准，应该会显示几乎相同的结果。

由于您是 SO 新手，因此我会提醒您选择一个答案（如果提供了答案），请单击复选标记。

【讨论】：