0

サイトの左ガターに画像を表示しようとしているので、画像の右側が常にサイト コンテンツの横に表示されます。これは IE8+ や他のブラウザーでは機能しますが、IE7 では機能しません。フロート権を無視しているようです。

IE7 モードで参照してください (目的の結果を得るには、IE8 または Chrome または FF を使用します): http://jsfiddle.net/ehEym/2/embedded/result/ - 基本的に、画像の右側にある青いバーがサイトの横に表示されるはずです。

含むコード:

<div id="main"><h1>The main content</h1><p>Text</p></div>
<div id="left">
  <img src="http://upload.wikimedia.org/wikipedia/commons/b/bf/Test_card.png" />
</div>

スタイル：

#main {
    width:300px;
    margin:0 auto;
    background-color:grey;
}
#left {
    position: fixed;
    display: block;
    top: 0px;
    left: 50%;
    border: 0px;
    margin-left: -350px;
    padding: 0px;
    overflow: hidden;
    z-index: 100000;
    width: 200px;
}
#left img {
    border: 0px;
    float: right;
}

何か案は？

4

2 に答える 2

1

適用されているにもかかわらず、IE7 がラッパーの左側にimgオーバーフローすることを許可していないように見えます。したがって、ラッパーの幅が広い場合と比較してラッパーの幅が狭い場合は、左端をラッパーの左端に揃えること以外は何もできません。これに対する修正は、幅に等しいマイナスを追加したこの fiddle で確認できます。#leftfloat: rightdivimgmargin-leftimg

#left img {
    border: 0px;
    float: right;
    margin-left: -640px; /* <-- equal to img width */
}

IE7 のみを対象とした方法でこれを行うことをお勧めします。Firefox や IE9+ には悪影響を及ぼさなかったようですが (私は Webkit をテストしていません)、IE8 の表示で問題が発生しました。他のブラウザーでは必要ないため、条件付きコメントを使用するか、この CSS で IE7 を対象とする他の手段を使用する必要があります。

于 2013-05-28T13:37:04.623 に答える
0

あなたが提示したCSSコードは、pxで定義された幅を持つ別の要素の近くに固定位置で画像を配置する場所を計算するのが難しいため、何をしたいのかを考えると少し奇妙です. そのため、IE7は動作しているに違いありません。

基本的に必要なことは、一方の側に画像を配置し、もう一方の側に残りのコンテンツを配置する 1 つの列を作成することです。

更新された CSS コード

body {
    height:100%;
}
#main {
    width:80%;
    padding-left:20%;
}
#left {
    position: fixed;
    top:0;
    left:0;
    width:20%;
    height:100%;
}
#left img {
    display:block;
    width:100%;
    height:100%;
}

http://jsfiddle.net/ehEym/4/embedded/result/

それはあなたのために働きますか？または、コンテンツをページの中央に配置する必要がありますか?

于 2013-05-23T03:54:36.740 に答える