2011-07-06 10 views
13

Próbuję stylu <header> i nie działa w IE. Używam Modernizr, ale sam próbowałem shiv.IE nie stylizujące znaczniki HTML5 (z shiv)

Przykład kodu

<section> 
    <header> 
    <h1>Title</h1> 
    </header> 
    <p>Body</p> 
</section> 

stylem:

section { 
    border: 2px dotted black; 
    padding: 0.25em; 
} 

header h1 { 
    background-color: #ccc; 
    text-align: center; 
    margin: 0; 
} 

Spodziewam obramowanie wokół treść nagłówka i sekcji, ale zamiast tego jest tylko granica „[” patrząc i nagłówek jest pod to.

Co poszło nie tak?

+1

@feela - jesteś o tym * pewny? Modernizator * ma * zawiera funkcję Shiv i działa na co najmniej IE8 i IE7. (używamy go do witryny, która musi działać w IE7 i jest w porządku). Zobacz tę odpowiedź, aby dowiedzieć się więcej o tym, co robi: http://stackoverflow.com/questions/3855294/html5shiv-vs-dean-edwards-ie7-js-vs-modernizr-which-to-oseose/3855343#3855343 – Spudley

+0

@feeela jest nieprawidłowe. Używamy tego i działa od IE7. –

+0

@Spudley @Michael Irigoyen Przepraszam, myślę, że jest za późno. Ja sam odpowiedziałem na [inne pytanie] (http://webmasters.stackexchange.com/questions/11729/whats-the-difference-between-modernizr-and-html5shiv/11740#11740) ... – feeela

Odpowiedz

26

W IE, nawet z shiv, musisz zadeklarować elementy HTML 5 jako elementy blokowe. Używam tego wiersza dla przeglądarki Internet Explorer, ale możesz go zmodyfikować dla potrzebnych elementów.

header,nav,article,footer,section,aside,figure,figcaption{display:block} 

Z Modernizr Documentation:

Będziesz także prawdopodobnie chcesz ustawić wiele z tych elementów display:block;

+0

To jest prawdopodobnie odpowiedź . – thirtydot

3

Czasami niestandardowych elementów (co jest jak przekonać IE używać HTML5 tagi) domyślnie są inline. Spróbuj dodać następujący fragment CSS:

section, 
header { 
    display: block; 
} 
5

To zależy od tego, jaki styl chcesz narzucić elementowi. Tak jak wcześniej pisał James Long, domyślne elementy to inline. W przypadku IE8 można również podać elementowi granicę, dodając display: inline-block;.