Uzyskiwanie rozpoznawania Safari <main> HTML 5

Wygląda na to, że niektóre całkiem nowe wersje Safari nie obsługują elementu HTML5 <main>. (Testowałem Safari 5.1.9 na Snow Leopard i mobilne Safari działające na IOS 4). Czy istnieje sposób, aby Safari rozpoznać element <main> (jak shiv)?Uzyskiwanie rozpoznawania Safari <main> HTML 5

Podałem razem przykładowy kod poniżej. Podczas wyświetlania w wersji Safari, której dotyczy problem, zielone pole <main> nie pojawi się, gdybym dodał więcej tekstu, wypłynie poza element <main>, tak jakby go tam nie było.

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; 
}

Źródło

2013-07-15 Elle

Czy dodałeś element do dokumentu i dodał domyślny styl dla niego? ' 'i' main {display: block;} ' – PeeHaa

@PeeHaa:' 'powinno być wymagane tylko dla IE8 i wcześniejszych. –

Większość przeglądarek wyświetla nieznane elementy, jak gdyby były display:inline domyślnie, więc pojawiały ten CSS gdzieś powinno wystarczyć:

main { 
    display: block; 
}

Np.

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

http://jsfiddle.net/PeF8u/ - zieleń niewidoczna
http://jsfiddle.net/PeF8u/1/ - zieleń widoczna

(. I badane w Safari 6.0.5 na Mountain Lion)

SitePoint mieć dobry napisanie elementu <main>: http://www.sitepoint.com/html5-main-element/

Istnieje również doskonała odpowiedź na przepełnienie stosu, która opisuje ogólnie sposób działania nowych elementów HTML5 (dla niektórych definicji "pracy") w starszych przeglądarkach: https://stackoverflow.com/a/13949253/20578

Źródło

2013-07-15 18:53:18

Wow Paul, dzięki za szybką reakcję! To rozwiązuje problem, nie mogę uwierzyć, że tego nie zrobiłem (biorąc pod uwagę, że musiałem powiedzieć wiele innych elementów HTML5, które mają być wyświetlane jako bloki). Usunąłem to pytanie z samego wstydu, ale uważam, że mogłoby to pomóc innym, więc zostawię to w spokoju. Dzięki jeszcze raz! – Elle

@ user2569147: jesteś bardzo mile widziany - 7 minut w rzeczywistości jest dość powolne dla Stack Overflow, szczególnie dla pytań typu slam-dunk takich jak ten (bardzo dobrze zapytany, nawiasem mówiąc). Tak, łatwo o tym zapomnieć - zawsze używam [Reset Eric Meyera do resetowania CSS] (http://meyerweb.com/eric/tools/css/reset/) dla moich projektów, ale obecnie nie obejmuje on '

', więc Też bym zapomniała. Myślę, że masz rację, że może pomóc innym, zdecydowanie warto tam pozostać. –

Czy próbowałeś znormalizować? – Chris

Uzyskiwanie rozpoznawania Safari <main> HTML 5

Odpowiedz

Powiązane problemy