html - div 在 IE 和 Opera 中定位不正确？

Question

我有一个带有丝带背景图像的 div。我想将带有丝带背景的 div 放在另一个 div (div 2) 上，这样看起来丝带缠绕在第二个 div 上。

现在这在 Chrome 和 safari 中工作正常，我不得不为 firefox 使用 assitional css 设置，但 IE 和 Opera 都显示我的功能区 div 比在 chrome 或 safari 中高约 25px。

我不确定这是为什么，而且我似乎无法让它不正确地定位(我只需要在这两个浏览器中以某种方式将它向下移动大约 25 像素)

(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;


}

Answer 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 定位以及为什么它通常不应与 float 结合使用。一方面，绝对定位的元素通常放置在(因此相对于)相对定位的元素内。

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

由于您是 SO 的新手，我会提醒您通过单击复选标记选择一个答案(如果提供)。