0

サイトの画像の上にある要素があります。画像は、すべてのブラウザーで正しい位置にウィンドウに読み込まれ、webkit を除くすべてのブラウザー (具体的には Safari と Chrome) に属する場所に再配置されます。Webkit ブラウザーでは、ウィンドウのサイズを変更しようとすると、要素が画像の下に再配置され、その余白が画像に対して相対的に設定されます。

これが私のhtmlです：

<body>

<div class="header-image">
  <img id="headerimg" src="images/header.jpg" alt="" />
  <img id="link-header" src="images/link-header.png" alt="" />
</div>

</body>

CSSは次のとおりです。

body { max-width:1236px; margin:0 auto; position:relative; }
.header-image { width:100%; height:auto; max-width:1236px; margin:0 auto; position:relative; }
#headerimg { width:100%; max-width:1236px; height:auto; }
#link-header { position:absolute; right:0; margin-right:10%; margin-top:275px; }

私が言ったように、他のすべてのブラウザは問題なくサイズ変更を行います。この問題が発生しているのは webkit だけです。アイデアはありますか？

4

1 に答える 1

0

私は画像を使用しておらず、1159px を超える Chome と 1209px を超える Apple の Safari で同じ奇妙なサイズ設定、配置、センタリングの動作を経験したため、画像とはまったく関係ありませんが、Apple では動作がわずかに異なります。1235px から 1250px の間のサイズは、それぞれに奇妙です。これは優れた診断記事ではないことは承知していますが、現時点では良いものです。もっと見つけたら、もっと投稿します。これは、サイズ変更後に winXP マシンでテストされました。私は何時間も頭を悩ませてきたので、あなたは絶対に一人ではありません.

あなたの場合、可能であれば1200px未満のサイズを設定すると、解決するはずです。申し訳ありませんが、これ以上の助けはありません。

于 2014-06-30T15:10:28.960 に答える