Question

我有一个div，它有一个带状背景图像。我想把我的div与功能区backgrounnd放在另一个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）的顶部

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定位进行一些研究，以及为什么它通常不应与浮点数结合使用。首先，绝对定位的元素通常放置在相对定位的元素内部（因此相对于它们）。

另外一个提示是，如果你遇到这种类型的问题，浏览器以不同的方式呈现你的布局，这可能意味着你的布局不好。 IE9 +，Firefox，Chrome和Safari都符合标准，并且应该向您显示几乎相同的结果。

由于您是新手，所以我会提醒您通过点击复选标记选择一个答案（如果提供了答案）。

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

1 个答案: