4

Safari でこの奇妙なバグに遭遇しましたが、解決策が見つからないので本当に困っています。StackOverflow とインターネットで同様の質問を見てきましたが、私の質問を解決するものはありませんでした。

問題の例はhttp://jsfiddle.net/WQnVu/5/にあります。したがって、基本的には、イメージ (ここでは固定サイズ) と 2 つのコンテナー (1 つは内側、もう 1 つは外側) があります。イメージは、外側のコンテナーに対して絶対的に配置されます。外側のコンテナーの幅に合わせて画像を再配置するには、負のパーセンテージ margin-top を実行します。コードは次のとおりです。

<div class="outer">
    <div class="inner">
        <div class="image"></div>
    </div>
</div>


.outer {
    height: 510px;
    width: 1024px;
    background-color: red;
    position: relative;
}

.inner {
    height: 100%;
    width: 100%;
    background-color: blue;
 }

 .image {
    width: 550px;
    height: 380px;
    position: absolute;
    top: 65%;
    right: 0;
    margin-top: -26%;
    background-color: green;
}

余白のパーセンテージは、イメージの包含ブロック(この場合は内側のコンテナー) の幅に相対的であると想定されています。これは実際に Firefox と Chrome に当てはまります。ただし、Safari では、ブロック自体の高さ、つまり画像の高さを基準にして余白を計算します。

この問題を解決する方法がわかりません。サイトはレスポンシブなので、マージン率が本当に必要です。コンテナの幅はそれに応じて変化しますが、高さは一定のままです。そのため、コンテナの幅に比例するものが必要です。特に Safari をターゲットとするハックがある場合は、喜んで使用しますが、私の知る限り、そのようなものはありません。

誰かがこれを解決する方法を考えることができれば素晴らしいでしょう。

敬具、

ヨラン

4

5 に答える 5

1

Safari で幅に基づいて margin-top または margin-bottom を計算する必要がある場合は、vw (viewport width) を calc (必要な場合) と組み合わせて使用​​して設定できます。これらは両方とも、Mac および iOS の Safari で十分にサポートされています。他のブラウザのフォールバックを残すだけです:

HTML:

<div id="container">
    <img src="image.png" />
</div>

CSS:

#container {
    height: 500px;
    width: 50%;
}
#container img {
    margin-top: 20%; /* Fallback */
    margin-top: calc( 50vw * .2 );
    max-width: 100%;
}
于 2013-06-05T15:07:25.050 に答える
0

高さが一定のままである場合、次のようなことができます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
.outer {
    height: 510px;
    width: 70%;
    background-color: red;
    position: relative;
}

.inner {
    height: 100%;
    width: 100%;
    background-color: blue;
 }

.image {
    width: 550px;
    height: 380px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -190px;
    background-color: green;
}
</style>

</head>
<body>

<div class="outer">
    <div class="inner">
        <div class="image"></div>
    </div>
</div>

</body>
</html>
于 2013-04-30T08:57:43.483 に答える
0

Safari のみを対象とし、 .outerの幅を取得し、その幅に基づいて margin-top を計算し、それを.imageに適用する JS ソリューションをお勧めします。

このような：

        var width = $('.outer').width();    // get width of .outer
        var topMargin = width * -0.26;     // calculate -0.26% of .outer's width

        // check if the browser is Safari
        if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {                  
            $('.image').css('margin-top', topMargin+'px');  // apply the calculated margin to .image
            }
        else {
        };

JS Fiddle の使用に問題がありました - ブラウザの検出の邪魔になると思います。ここでサンプルページを参照してください。

それが役立つことを願っています。

于 2013-07-12T04:44:01.070 に答える