Tải Safari để nhận dạng <main> HTML 5

Dường như một số phiên bản Safari gần đây không hỗ trợ phần tử HTML5 <main>. (Tôi đã thử nghiệm Safari 5.1.9 trên Snow Leopard và Safari di động chạy trên iOS 4 cho đến nay). Có cách nào để Safari nhận ra phần tử <main> (giống như shiv) không?Tải Safari để nhận dạng <main> HTML 5

Tôi đã gửi cùng một số mã ví dụ bên dưới. Khi được xem trong phiên bản Safari bị ảnh hưởng, hộp <main> màu xanh lá cây không xuất hiện, nếu tôi thêm nhiều văn bản hơn, nó sẽ chảy bên ngoài phần tử <main> như thể nó không có ở đó.

HTML:

<body> 
    <main> 
     <nav id="bar"></nav> 
     <p>Lorem Ipsum</p> 
    </main> 
</body>

CSS:

main{ 
width:800px; 
height:800px; 
background-color:#0C0; 
} 

#bar{ 
width:300px; 
height:400px; 
float:left; 
background-color:#09F; 
}

Nguồn

2013-07-15 Elle

Bạn đã thêm phần tử vào tài liệu và thêm phong cách mặc định cho nó? ' 'và' chính {display: block;} ' – PeeHaa

@PeeHaa:' 'chỉ nên được yêu cầu cho IE8 trở về trước. –

Hầu hết các trình duyệt hiển thị các yếu tố chưa được biết như thể chúng là display:inline theo mặc định, vì vậy popping CSS này ở đâu đó nên làm điều đó:

main { 
    display: block; 
}

Ví dụ:

main { 
    display: block; 
    width: 800px; 
    height: 800px; 
    background-color: #0C0; 
}

http://jsfiddle.net/PeF8u/ - diện tích cây xanh không thể nhìn thấy
http://jsfiddle.net/PeF8u/1/ - xanh vùng hiển thị

(. Tôi đã thử nghiệm trong Safari 6.0.5 trên Mountain Lion)

Sitepoint có tốt viết phần tử <main>: http://www.sitepoint.com/html5-main-element/

Ngoài ra còn có một câu trả lời Stack Overflow tuyệt vời mô tả một cách tổng quát làm thế nào để có được các yếu tố HTML5 mới hoạt động (đối với một số định nghĩa "làm việc") trong các trình duyệt cũ hơn: https://stackoverflow.com/a/13949253/20578

Nguồn

2013-07-15 18:53:18

Wow Paul, cảm ơn phản ứng nhanh! Điều này khắc phục vấn đề, tôi không thể tin rằng tôi đã không làm điều này (xem xét tôi đã phải nói với nhiều yếu tố HTML5 khác để hiển thị dưới dạng khối). Tôi sẽ xóa câu hỏi này khỏi sự xấu hổ tuyệt đối, nhưng tôi cảm thấy rằng nó có thể giúp đỡ người khác, vì vậy tôi sẽ để nó một mình. Cảm ơn một lần nữa! – Elle

@ user2569147: bạn rất hoan nghênh - 7 phút thực sự khá chậm đối với Stack Overflow, đặc biệt là đối với các câu hỏi slam-dunk như thế này (rất được yêu cầu, nhân tiện). Vâng, thật dễ quên - Tôi luôn sử dụng [Đặt lại CSS của Eric Meyer] (http://meyerweb.com/eric/tools/css/reset/) cho các dự án của tôi, nhưng hiện tại nó không bao gồm '

', vì vậy Tôi cũng đã quên mất rồi. Tôi nghĩ bạn nói đúng là nó có thể giúp đỡ người khác, chắc chắn đáng để lại ở đó. –

Bạn đã thử chuẩn hóa chưa? – Chris

Tải Safari để nhận dạng <main> HTML 5

Trả lời

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