0

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

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

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

分区 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;


}
4

1 回答 1

0

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 新手，因此我会提醒您选择一个答案（如果提供），请单击复选标记。

于 2013-02-15T03:10:02.193 回答