10

Safariがこれをソートしたと思っていましたが、まだ問題があるようです（明らかに間違ったことをしていない限り）。

object タグ内に SVG を配置しています。これは、DIV を含むフレキシブルにラップされます (たとえば、幅 50% に設定されます)。サイズを変更すると、Firefox、Chrome、Opera では期待どおりにコンテナーの高さが変更されますが、Safari ではコンテナーが高すぎます。

Codepen の例を次に示します。フルサイズの結果に切り替えるか、「横のエディター」(右下のボタン) に切り替えて、Safari で効果を明確に確認してください: http://codepen.io/benfrain/full/fhyrD

ロード/サイズ変更時にJSを使用してSVGのサイズを変更する以外に、Safariを正しく動作させるために他にできることがあるかどうかは誰にもわかりますか? 数週間前にこれを理解したと断言できますが、今は再び問題にぶつかっているようです.

4

1 に答える 1

13

それで、セルジオ・ロペスはこれに対する答えを持っていました. Thierry Koblentz がhttp://alistapart.com/article/creating-intrinsic-ratios-for-videoで説明しているビデオ手法に固有の比率を使用できます。詳細については、このブログ投稿をご覧ください: http://benfra.in/20l

CSS で必要なカット アンド ペースト コードは次のとおりです。

周囲のオブジェクト タグ

object {
    width: 100%;
    display: block;
    height: auto;
    position: relative;
    padding-top: 100%;
}

そして、これは内部の SVG の場合:

svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
于 2013-06-28T08:46:22.417 に答える