44

Chrome や Firefox では正しく動作しません。これに対する回避策はありますか？

   <!DOCTYPE html>
   <html>
   <head></head>
   <body>
    <h3>overflow-y:visible</h3>

    with overflow-x:hidden
    <div style="overflow-x:hidden;overflow-y:visible;width:100px;height:100px;   position:relative;background:#666;">
        <div style="top:20px;left:20px;    width:420px;height:420px;position:absolute;background:#420;">
        </div>
    </div>

    without overflow-x:hidden
    <div style="overflow-y:visible;width:100px;height:100px;position:relative;background:#666;">
        <div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;">
        </div>
    </div>

   </body>
   </html>

http://jsfiddle.net/sMNyK/

実際のシナリオでは、絶対にoverflow-x:hiddenが必要なコンポーネントが含まれますが、y方向に要素から解放できる必要があるポップアップメニューをトリガーします。これらのメニューを親コンポーネントの外に配置する必要がありますか、それともより良い修正がありますか?

4

2 に答える 2

4

非表示にするがセットdivを持たない追加のラッピングを使用して、必要なものを取得できると思います（ fiddle を参照）：position: relative

<div style="overflow-y:visible;width:100px;height:100px;position:relative;background:#666;">
    <div style="overflow-x:hidden">
    ooooooooooooooooooooooooooooooooooooooooooooooo  
        <div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;">
        </div>
    </div>
</div>
于 2012-07-17T12:24:25.247 に答える