overflow-y: hiển thị không hoạt động khi overflow-x: hidden hiện diện

Không hoạt động bình thường trong Chrome hoặc Firefox. Có cách giải quyết nào cho vấn đề này không?overflow-y: hiển thị không hoạt động khi overflow-x: hidden hiện diện

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

Kịch bản cuộc sống thực bao gồm các thành phần hoàn toàn phải có overflow-x: ẩn, nhưng điều đó sẽ kích hoạt cửa sổ bật lên-menu cần để có thể thoát khỏi các phần tử trong y hướng . Tôi có nên chỉ định vị trí các menu bên ngoài các thành phần gốc của chúng hay không, hoặc có sửa chữa tốt hơn không?

Nguồn

2012-07-17 Seppo420

Tôi phát hiện ra điều này, có vẻ như nó vẫn là một vấn đề trong FF (v21) và Chrome (v27). Vấn đề của tôi: 'overflow-x: visible; overflow-y: hidden; 'chưa cắt xén xuất hiện trên cả hai trục. – Sprintstar

Tôi cũng gặp phải vấn đề này, cả trong FF và Chrome. Nó chắc chắn trông giống như một lỗi hơn là hành vi mong đợi. – smohadjer

bạn gặp vấn đề vì vị trí: tương đối; –

Tôi nghĩ bạn có thể có được những gì bạn muốn với một thêm gói div mà không được lẩn trốn nhưng không có position: relative bộ (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>

Nguồn

2012-07-17 12:24:25 ScottS

Điều này sẽ không hoạt động, vì các thành phần yêu cầu overflow-y: hiển thị bên trong các thành phần yêu cầu overflow-x: hidden – Seppo420

@ user1185421 - Trước tiên, bạn đã nói trong câu hỏi của bạn rằng việc đặt chúng "bên ngoài các thành phần chính" có lẽ là lựa chọn duy nhất. Giải pháp của tôi sẽ hoạt động miễn là các thành phần đó yêu cầu 'overflow-x: hidden' không có' vị trí' được đặt trên chúng. Điều này sẽ cho phép phần tử 'absolute' chỉ liên quan đến div là' overflow-y: visible'. – ScottS

@ user1185421 - [đây là một fiddle] (http://jsfiddle.net/sMNyK/4/) với một 'div' rộng chứa div pop-out. – ScottS

Điều này có thể đã làm với vấn đề giải quyết ở đây: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

Nói tóm lại, khi sử dụng visible cho một trong hai overflow-x hoặc overflow-y và một cái gì đó khác hơn visible cho người khác, giá trị visible được hiểu như là auto.

Nguồn

2013-06-10 09:02:34 Sprintstar

+17

đây có phải là lỗi mà các nhà cung cấp trình duyệt phải sửa chữa hoặc chỉ định bằng W3C không? Bởi vì nó khủng khiếp ... – ProblemsOfSumit

2,5 năm sau và lỗi này vẫn tồn tại –

FF 52 và điều này vẫn xảy ra. thêm một năm nữa ... – Sebastianb

overflow-y: hiển thị không hoạt động khi overflow-x: hidden hiện diện

Trả lời

Các vấn đề liên quan