0

リボンの背景画像を持つ div があります。別の div (div 2) の上にリボンの背景を付けて div を配置したいので、リボンが 2 番目の div に巻き付いているように見えます。

これは Chrome と Safari で正常に動作し、Firefox では任意の CSS 設定を使用する必要がありましたが、IE と Opera の両方でリボン div が chrome や safari よりも約 25 ピクセル高く表示されます。

これがなぜなのかわかりませんが、位置を正しくしないようには見えません（これらの2つのブラウザでのみ、どうにかして約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;


}
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 のポジショニングと、通常フロートと組み合わせてはならない理由について、いくつかの調査を行う必要があります。1 つには、絶対位置の要素は通常、相対位置の要素の内側に (したがって相対的に) 配置されます。

もう 1 つのヒントは、ブラウザーがレイアウトを異なる方法でレンダリングするこの種の問題が発生している場合、おそらくレイアウトが悪いことを意味します。IE9+、Firefox、Chrome、および Safari はすべて標準に完全に準拠しており、ほぼ同じ結果が表示されるはずです。

SO は初めてなので、回答が提供されている場合は、チェックマークをクリックして回答を選択してください。

于 2013-02-15T03:10:02.193 に答える