1

Chrome 26 (安定版) のウィンドウで正しくサイズ変更されないネストされた div がいくつかありますが、Firefox だけでなく以前のバージョンでも正常に動作します。バグ レポートを提出する前に、私が見ているものが、私の他のブラウザーが正しく動作していないような標準的な動作ではないことを確認したいと思います。

Chrome 26 を使用して、この Plunkrでプレビュー ペインのサイズを変更してみてください。要素は、親の#inner境界を超えて縮小または拡大しますが、これは望ましくなく、以前のバージョンの Chrome または Firefox では実行されません。

#outerdiv を絶対位置に設定すると問題が解決しますが、 #outerdiv を固定する必要があります。position:absoluteまた、から削除すると問題が解決することにも気付きました#main…しかし、#main絶対に配置する必要があります。

なぜこれが起こっているのか、あるいはこれが予想される動作であっても、私は途方に暮れています。要素を個別にスケーリングするのではなく、#inner子のサイズを#outer親と一緒に変更する必要があります。#outerどうすればこれを達成できますか？

HTML/CSS

<!doctype html>
<html>
<style>
#main {
    min-height: 100%;
    position: absolute;
    width: 100%;
}
#container {
    min-width: 400px;
    width: 50%;
    margin: auto;
    position: relative;
}
#outer {
   position: fixed;
   border: solid 2px black;
   margin-top: 100px;
   top: auto;
   max-height: 150px;
   position: fixed;
   width: 50%;
   min-width: 400px;
   margin: auto;
   background-color: green;
}

#inner {
    background-color: rgba(0,0,0,.5);
    padding: 10px;
    border: 2px gray dashed;
    position: relative;
}

</style>
<div id="main">
<div id="container">
    <div id="outer">
        <div id="inner">
            <input type="text">
        </div>
    </div>
</div>
</div>
4

1 に答える 1

0

メイン コンテナーをposition:fixed次のように変更すると、サイズ変更の問題が修正されます。ページ レイアウトにどのような影響があるかはわかりませんが、見た目は似ています。

#main 
{
    position:fixed;
    top:0;bottom:0;left:0;right:0;
    background-color:#d3fcee;
}
于 2013-05-16T20:03:00.503 に答える