5

このフィドルは、実際のブラウザー（FF、GC、Safariを試しました）では期待どおりの結果を生成しますが、IE9、IE10、およびIE11では予期せず壊れます。IE7またはIE8に問題はありません。

Firefoxが左側にあり、IE9-IE11が右側にあります

<div class="root">
    Top
    <div class="footer">Bottom</div>
</div>

.root {
    background-color: red;
    position: absolute;
    height: auto;
    bottom: 0; top: 0; left: 0; right: 0;
    margin: 25px;
    border: 0;
    border-radius: 7px;
    overflow: hidden;
}

.footer {
    background-color: green;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
}

親から削除しborder-radiusたりoverflow:hidden、親から削除したりすると、すべて正常に機能します。しかし、いったいそれは固定位置の子供と何の関係があるのでしょうか？ビューポートに対して常に相対的に配置されることになっています。

既知の\文書化されたバグですか？その背後にある理論的根拠は何ですか？

4

2 に答える 2

8

これが私が起こっていると思うことです。

ブラウザベンダーはfixed、オーバーフローした位置要素のクリッピングをオフにすることを決定したようです。たとえば、親によってクリップされていない場合などです。fixed要素は親ではなくウィンドウを基準にして配置されるため、これにより一貫性が保たれます。クリッピングが適用された場合、ウィンドウを基準にした位置/幅と、親を基準にしたクリッピングがあります。視覚的には次のようになります（下の角を丸くする必要があることを除いて、以下で詳しく説明します）。

つまりfixed、要素、オーバーフロークリッピングはありません。小切手。

しかし、IE9では何かが変わりました。彼らは丸い角のサポートを導入しました。さて、丸みを帯びたクリッピングについて私が言ったことに。IE9は実際にこれを正しく行いました。現在、多くのブラウザは、要素の角が丸い場合でも、角が四角でクリップします。これは悪いです。どうやら、IE9は丸みを帯びた角の存在を検出し、そのような場合、クリッピングを再描画することでこれを修正しました。それをするとき、それは2つの間違いをします。

  1. fixedクリッピングを適用します。「要素、オーバーフロークリッピングなし」ルールを元に戻します。クリッピングが再びオンになり、要素が親の幅でクリッピングされるようになりました。

  2. クリッピングは、親からのものであると想定されているという事実に関係なく、中央に配置されずに要素に直接配置されます。0,0から指定された幅と高さまでクリップされます。これが、緑色の要素が左揃えで表示される理由です。右/下の50pxは非表示になっています。

修正？

  • fixed中に入れ子にしないでくださいabsolute。（最善の解決策-将来的に奇妙なエッジケースを回避する）
  • 親（赤）のdivに幅を与えます。
  • 新しいdivものを直接中に入れ子にして、そこ.rootに移動overflow:hiddenします。フィドルの例。（最も邪魔にならない）
于 2012-10-31T00:52:26.733 に答える
0

同じ問題がありました：

<div class="relative-parent-with-border-radius">
  ...
  <div class="container">
    <div class="fixed-child">...</div>
  </div>
  ...
</div>

.container位置をに設定することで修正-ms-page

于 2017-09-25T10:11:12.227 に答える