overflow-y：overflow-x：hiddenが存在すると表示されません。

ChromeまたはFirefoxで正しく機能しません。この問題を回避する方法はありますか？overflow-y：overflow-x：hiddenが存在すると表示されません。

<!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/

現実のシナリオでは、絶対にオーバーフロー-Xを持っている必要がありますコンポーネントが含ま：隠されたが、それはy方向の要素から自由を破るできるようにする必要がありますポップアップメニューをトリガします。これらのメニューを親コンポーネントの外に配置するか、より良い修正が必要なのでしょうか？

出典

2012-07-17 Seppo420

これはFF（v21）とChrome（v27）の問題のようです。私の問題： 'overflow-x：visible; overflow-y：hidden; 'ですが、クロッピングは両方の軸で発生します。 – Sprintstar

FFとChromeの両方でこの問題に直面しました。確かに予想される動作ではなく、バグのように見えます。 – smohadjer

あなたは問題が発生しているためposition：relative; –

私はあなたが隠しを行い、余分なラッピングdivであなたが欲しいものを得ることができると思いますがposition: relativeセット（see fiddle）がありません：これはおそらく問題に関係している

<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-17 12:24:25 ScottS

これは、overflow-y：visibleを必要とするコンポーネントがoverflow-xを必要とするコンポーネントの内部にあるため、うまくいきません： – Seppo420

@ user1185421 - まず親コンポーネントの外に置くことはおそらく唯一のオプションです。私の解決策は、 'overflow-x：hidden'を必要とするコンポーネントが' position'を設定していない限り動作します。これは 'absolute'要素が' overflow-y：visible'であるdivにのみ関連することを許します。 – ScottS

@ user1185421 - ポップアウトdivを含む幅広い「div」を持つ[こちらはフィドルです]（http://jsfiddle.net/sMNyK/4/）。 – ScottS

はここで扱わ：、要するにCSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

overflow-x又はoverflow-yおよびその他のためvisible以外のいずれかのためにvisibleを使用して、visible値はとして解釈され。

出典

2013-06-10 09:02:34 Sprintstar

+17

これは、ブラウザベンダーがW3Cによって修正または仕様化すべきバグですか？それはひどいので... – ProblemsOfSumit

2.5年後、このバグはまだ残っています –

FF 52これはまだ起こります。もう一年追加... – Sebastianb

overflow-y：overflow-x：hiddenが存在すると表示されません。

答えて

関連する問題