Firefox & CSS3: sử dụng tràn: ẩn và hộp bóng

Tôi không chắc liệu lỗi này chỉ áp dụng cho Firefox hay cho các trình duyệt dựa trên WebKit, nhưng nó thực sự, thực sự gây phiền nhiễu.Firefox & CSS3: sử dụng tràn: ẩn và hộp bóng

Tôi có một mẫu/khung cho giao diện CMS của mình, sử dụng hộp bóng trên một vài phần tử có chiều rộng là 100%. Vì điều này gây ra bóng ở phía bên phải của phần tử, thanh cuộn xuất hiện. Để ẩn thanh cuộn xấu xí, tôi đặt "overflow: hidden" trên phần tử body và trên div trình bao bọc.

Điều này gây ra một số hành vi lạ. Mặc dù không có thanh cuộn nào, trang vẫn cuộn sang phải khi tôi cuộn bằng bàn di chuột (cuộn ngang). Tôi đã thử một địa ngục rất nhiều và googled ass của tôi ra, nhưng tôi dường như không thể tìm thấy một giải pháp cho điều này ..

Bất cứ ai biết một người giải quyết vấn đề? hay đây chỉ là một ví dụ về việc thực hiện xung đột hộp bóng css3?

Nguồn

2010-02-26 Fabdrol

Otto: liên kết bị hỏng. –

Gah, tôi không có ý định upvote liên kết bị hỏng của Otto. – lemonad

Trước tiên, hãy cẩn thận khi chỉ đến điều của người khác làm nguyên nhân của sự cố. Hãy suy nghĩ về bản thân, nhiều khả năng, vấn đề là với đoạn mã được sử dụng bởi 200 nghìn người dùng và các nhà phát triển 20k hàng ngày, hoặc là nó được sử dụng bởi bạn, trong 4 giờ.

Điều đó nói rằng, bước tiếp theo của bạn nên là giảm bớt điều này xuống một trang thử nghiệm đơn giản chỉ chứa đủ HTML để chứng minh hành vi. Trong trường hợp của bạn, đó sẽ là một trang như thế này:

<html> 
    <body style="overflow:hidden;"> 
    <div style="box-shadow:whatever;"> 
     This should cause scrollbars to show 
    </div> 
    </body> 
</html>

Một trong hai điều sẽ xảy ra:

Hoặc là vấn đề sẽ không xuất hiện, trong trường hợp này bạn có thể chậm thêm phía sau những thứ khác trên trang thực tế của bạn cho đến khi bạn tìm hiểu điều gì thực sự gây ra sự cố.

Hoặc sự cố vẫn sẽ ở đó, trong trường hợp đó bạn có thể báo cáo lại cho chúng tôi tại đây. Bạn cũng sẽ có thể gửi báo cáo lỗi với các thành viên của Mozilla.

Chúc may mắn!

Nguồn

2010-02-26 19:12:11

Tôi đã thử điều đó, nhưng hành vi không thay đổi. Tôi phải lưu ý rằng có ** không có thanh cuộn **, nó chỉ cuộn - một chút giống như trên iphone .. (khi bạn có một danh sách và cuộn lên, bạn có thể di chuyển lên xa hơn sau đó chiều cao của danh sách) – Fabdrol

Trong khi nghe có vẻ khó chịu, đó không phải là lỗi, nó thực sự là một tính năng. Nếu có vùng cuộn/cuộn và khu vực được kích hoạt và một mũi tên hoặc thiết bị đầu vào khác đang kích hoạt, khu vực sẽ cuộn.

Để chống lại điều này, bạn có thể cố gắng chống lại mỗi lần nhập người dùng có thể (di chuột qua bàn phím, phím mũi tên, đánh dấu và kéo) bằng javascript, nhưng câu trả lời hay nhất là suy nghĩ lại cách bạn đang sử dụng CSS tại đây. Hãy thử sử dụng width:auto thay vì width:100%, chẳng hạn.

Để chứng minh (cập nhật):

CSS:

#parent { width:50px; height:20px;overflow:hidden; } 
#overflow { width:50px;height:50px;overflow:auto; }

HTML:

<div id="parent"> 
    <div id="overflow">blahaahhahahahahahahahahahahaaaaaaaaaaahahahahahaaaaaaaaaaaaaaahhhhhhhhhhhhhhhhhhahhaahahaha</div> 
</div>

Jack chiều cao trên #parent lên đến 50px và bạn thấy scrollbar still-- Nó chỉ được che đậy; nội dung không được giấu kín. Đặt overflow:hidden trên #overflow và không có thanh cuộn.

Nguồn

2010-02-28 09:51:10

Bạn có có nghĩa là để nói rằng trình duyệt có 'cuộn-đầu vào' (bất kỳ cách nào để cuộn) ngay cả khi tràn được đặt thành ẩn? có nghĩa là (âm thanh hợp lý, nếu tôi nghĩ về nó bây giờ) mọi thứ 'ngoài trang' không hiển thị nhưng vẫn có thể sử dụng được? (Mặc dù bạn có thể đặt câu hỏi về khả năng sử dụng) – Fabdrol

Vâng, về cơ bản, mặc dù tôi nên ngừng trả lời khi tôi cảm thấy mệt mỏi. Tôi hiểu bạn đang nói rằng bạn đang che đậy một thanh cuộn tồn tại trong một div với tràn: ẩn trên một phụ huynh. Nếu đó là trường hợp, sau đó có - nếu tràn: ẩn là trên các yếu tố với nội dung dư thừa, mặc dù, nó không di chuyển, nó chỉ cần cắt nó. –

Kiểm tra ví dụ về mã cập nhật mà tôi đã cung cấp. Mã có thể rõ ràng hơn tôi. :) –

Vì tôi đang xử lý cùng một vấn đề khó chịu, tôi sẽ tiếp tục và kêu gọi ở đây để nói rằng đây chắc chắn là một tính năng tồi tệ (nếu thực sự nó nên được gọi là tính năng). Để có một hộp bóng gây ra một thanh cuộn là vô dụng, mặc dù tôi muốn được hạnh phúc để ăn lời nói của tôi nếu ai đó có thể cho tôi một thực sự lý do chính đáng nên như thế.

Tôi nghĩ câu trả lời ở đây chỉ là hiển thị trang hơi khác một chút và cho phép người dùng firefox bỏ lỡ bóng trên hộp. Đủ dễ dàng nếu bạn không khai báo -moz-box-shadow.

Nguồn

2010-06-15 13:38:45 erskingardner

Hoàn toàn đồng ý với bạn. Bóng sẽ không bao giờ khiến các thanh cuộn xuất hiện. Đây không phải là trường hợp với WebKit, nó chỉ là một vấn đề của Moz. – Elie

Câu trả lời này phải được chấp nhận IMO. – Andy

Cảm ơn bạn đã bỏ phiếu cho sự tự tin @Andy. – erskingardner

Tôi vừa gặp vấn đề này với thiết kế tôi đang thực hiện. Về cơ bản, Firefox tạo một vùng có thể cuộn cho bất kỳ bóng nào kéo dài qua cạnh phải của trang. Vì lý do nào đó, Firefox không tạo vùng cuộn nếu bóng mở rộng sang trái. Vì vậy, giải pháp đơn giản của tôi là di chuyển bóng hoàn toàn sang bên trái.

Mã Problematic:

-moz-box-shadow: 5px 5px 5px #000;

Giải pháp đơn giản:

-moz-box-shadow: -5px 5px 5px #000;

tôi đã cố gắng thiết lập các x-offset để 0px, nhưng kể từ khi mờ là 5, vẫn còn một diện tích cuộn khoảng 2- Rộng 3px.

Nguồn

2010-08-11 19:02:32

+1, điều này chắc chắn hoạt động để loại bỏ thanh cuộn. Thật không may, với độ nhòe 20px, bạn phải di chuyển bóng đến mức đủ để khoảng trống bên phải là khá đáng chú ý, nhưng hey, nó tốt hơn là không có bóng tối chút nào, tôi đoán vậy. –

Tôi không biết bố cục của trang web của bạn, nhưng trên tôi tôi chỉ muốn cuộn dọc và không nằm ngang. Đó là một phần cơ sở là lý do tại sao hộp bóng gây ra cuộn ngang là không mong muốn đối với tôi, vì CSS của trang web của tôi hiện đang xây dựng cho bố cục nằm ngang theo chiều ngang ngoài khung nhìn.

tôi đã có thể sửa chữa nó trong Firefox 3.6 (đó là tất cả những gì được kiểm tra) và thử nghiệm nó qua trình duyệt Google Chrome 8.0.552.327 và IE 8 với các quy tắc CSS sau đây vào yếu tố cơ thể của tôi:

body{ 
    overflow-x: hidden; 
}

Nguồn

2011-02-04 17:57:46 Rich

Bạn có thể sử dụng bán kính trải rộng (chiều dài thứ tư) để làm cho kích thước của bóng nhỏ hơn kích thước của phần tử và sau đó là độ lệch y lớn để cho nó hiển thị bên dưới phần tử. Một cái gì đó như box-shadow: 0 10px 10px -5px black; (tất nhiên tôi không biết bạn cần những giá trị nào vì bạn không cung cấp một fiddle, bạn cần phải chơi xung quanh với chúng trong các công cụ dev). Hãy nhớ rằng bán kính trải rộng làm cho bóng mở rộng/hợp đồng từ mọi phía. Vì vậy, ví dụ, bán kính trải rộng -1px sẽ thực sự làm cho bóng tối hơn 2px.

Nguồn

2011-02-09 19:02:23

Chuyển đến đoạn thứ hai để có giải pháp thực tế.

Tùy thuộc vào nhu cầu của bạn vấn đề và giải pháp mà tôi tìm thấy cho bản thân mình có thể đáp ứng nhu cầu của bạn. Tôi thấy rằng vấn đề của tôi khá giống nhau, không có thanh cuộn khi body { overflow: hidden; }, lý do là, tôi tin rằng kích thước của các phần tử html và nội dung thực tế được quyết định bởi kích thước của khu vực có thể xem của cửa sổ trình duyệt.

giải pháp: Nếu bạn chỉ phát hành là tràn trục x, bạn có thể làm body{ overflow-x: hidden; }, sau đó sử dụng javascript hoặc phương tiện truyền thông truy vấn bạn có thể dễ dàng thay đổi các thuộc tính áp dụng cho phần tử cơ thể và thay đổi nó trở lại bất cứ điều gì bạn vui lòng.

dụ:

body { overflow-x: hidden; } 

@media screen and (min-width: 1200px) { 
    body { overflow-x: visible; } 
}

hy vọng điều này giúp.

Nguồn

2012-02-16 08:18:27

Firefox & CSS3: sử dụng tràn: ẩn và hộp bóng

Trả lời

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