2010-08-26 14 views
9

Tôi có một div mà tôi sử dụng để hiển thị cảnh báo khi cần.Hiển thị CSS: none và visibility: hidden

Nếu tôi muốn đóng lại sau một thời gian, tôi có thể sử dụng màn hình hiển thị: không hoặc tôi có nên sử dụng màn hình hiển thị: không hoặc hiển thị: bị ẩn?

Vì vậy, một hoặc cả hai.

Cảm ơn bạn.

+0

display: none chỉ sẽ chỉ làm việc tốt – Tommy

Trả lời

18

Tùy thuộc. Nếu bạn cần khoảng trống để trống, nghĩa là không gian sẽ không bị các phần tử khác bên dưới hoặc xung quanh chiếm, bạn sẽ cần visibility: hidden. Nếu không, hãy sử dụng display: none, điều này sẽ cho phép các yếu tố khác di chuyển vào vị trí của phần tử.

Không có lý do gì để sử dụng cả hai.

6

Khả năng hiển thị: ẩn ẩn phần tử nhưng vẫn chiếm không gian trong bố cục. Hiển thị: không loại bỏ hoàn toàn.

Trong trường hợp của bạn, tôi sẽ sử dụng hiển thị: none

+1

không có hiển thị: ẩn, có visibility: hidden :) – Sotiris

+0

Đó là những gì tôi nhận được để gõ trước cà phê! Cảm ơn bạn đã nắm bắt, tôi đã cập nhật bài đăng của mình. :) – Chuck

6

Nếu nội dung ẩn của bạn cần phải được tiếp cận — với những người có trình đọc màn hình, ví dụ — thì bạn không nên sử dụng display: none hoặc visibility: hidden, vì cả hai khả năng có thể ẩn nội dung từ trình đọc màn hình. Thay vào đó, bạn nên sử dụng một cách tiếp cận dễ tiếp cận hơn, chẳng hạn như di chuyển màn hình tắt nội dung với một lề âm. Xem các liên kết sau để biết thêm thông tin:

456 Berea Street: Hiding with CSS: Problems and solutions
WebAIM Blog: Hiding content for screen readers

+1

Chỉ cần tò mò, nhưng tại sao chính xác bạn muốn ẩn nội dung nhưng vẫn có thể truy cập được vào trình đọc màn hình? Nếu nó bị ẩn, đó là vì tôi hiện không muốn nó được hiển thị. – Maverick

+1

@ MrN00b Bạn có thể ẩn nội dung vì lý do thẩm mỹ, chẳng hạn như các phần có thể thu gọn mà người dùng có thể ẩn hoặc tiết lộ. – Mike