Überlauf-y: sichtbar funktioniert nicht, wenn Überlauf-x: ausgeblendet ist

Funktioniert nicht richtig in Chrome oder Firefox. Gibt es einen Workaround dafür?Überlauf-y: sichtbar funktioniert nicht, wenn Überlauf-x: ausgeblendet ist

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

Das Szenario realen Leben beinhaltet Komponenten, die absolut müssen Überlauf-x: hidden, aber das wird Popup-Menüs auslösen, die in y-Richtung von dem Element befreien zu können, müssen . Sollte ich diese Menüs nur außerhalb ihrer übergeordneten Komponenten positionieren, oder gibt es eine bessere Lösung?

Quelle

2012-07-17 Seppo420

Ich entdeckte das, was aussieht, als wäre es immer noch ein Problem in FF (v21) und Chrome (v27). Mein Problem: 'overflow-x: visible; overflow-y: hidden; 'dennoch erfolgt das Beschneiden auf beiden Achsen. – Sprintstar

Ich habe dieses Problem heute sowohl in FF als auch in Chrome kennengelernt. Es sieht eher nach einem Fehler aus als nach einem erwarteten Verhalten. – smohadjer

Sie bekommen Problem, weil Position: relativ; –

Ich glaube, Sie können, was Sie wollen mit einem zusätzlichen div Einwickeln, die das Versteck tut, aber nicht über den position: relative Satz (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>

Quelle

2012-07-17 12:24:25 ScottS

Dies wird nicht funktionieren, da die Komponenten, die overflow-y: visible erfordern, in denen sind, die overflow-x benötigen: hidden – Seppo420

@ user1185421 - Zuerst haben Sie in Ihrer Frage gesagt, dass sie "außerhalb der übergeordneten Komponenten" platziert einzige Option. Meine Lösung sollte so lange funktionieren, wie für die Komponenten, die "overflow-x: hidden" benötigen, keine "position" gesetzt ist. Dies erlaubt dem 'absoluten' Element, sich nur auf das div zu beziehen, das 'Überlauf-y: sichtbar' ist. – ScottS

@ user1185421 - [hier ist eine Geige] (http://jsfiddle.net/sMNyK/4/) mit einem breiten 'div', der das pop-out div enthält. – ScottS

Dies dürfte mit der Frage angesprochen zu tun hat: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

kurz gesagt, wenn visible für die Verwendung von entweder overflow-x oder overflow-y und etwas anderes als visible für den anderen, der visible Wert wird alsinterpretiert.

Quelle

2013-06-10 09:02:34 Sprintstar

+17

ist das ein Bug, den Browser-Hersteller von W3C reparieren oder spezifizieren sollten? Weil es schrecklich ist ... – ProblemsOfSumit

2.5 Jahre später und dieser Fehler existiert immer noch –

FF 52 und das passiert immer noch. fügen Sie noch ein Jahr hinzu ... – Sebastianb

Überlauf-y: sichtbar funktioniert nicht, wenn Überlauf-x: ausgeblendet ist

Antwort

Verwandte Themen