2010-04-07 6 views
1

J'utilise les éléments HTML5 et dans un projet sur lequel je travaille et le css semble fonctionner correctement dans Chrome. Cependant, il ne semble pas fonctionner dans Safari ou Firefox (je n'ai pas testé IE, mais j'imagine que c'est la même chose), et la mise en page est partout.Éléments HTML5 fonctionnant sous Chrome mais pas Safari ou Firefox?

Des idées pourquoi ce peut être? Je sais que Firefox et Safari prennent tous deux en charge ces éléments, et Safari est basé sur Webkit comme Chrome, donc je n'arrive pas à comprendre quel est le problème.

Vous pouvez voir la page Web here. {lien site non disponible}

+0

Je vois la même chose sur Chrome 4.1.249.1045 (42898) et Firefox 3.6.2, et les deux semblent incorrects (avec la carte chevauchant le titre et "Attendez, qu'avez-vous dit?" Étant recouvert d'autre chose. – ChrisF

Répondre

6

Safari et Firefox ont le même niveau de «support» pour les éléments de section HTML5 (après avoir vu votre page de démonstration, je suppose que ce sont les éléments dont vous parlez): ils peuvent être stylé, mais vous devez définir display: block; implicitement. L'ajout de cette règle à votre CSS résoudra le problème. Pour rendre ces éléments stylables dans IE, il suffit d'utiliser le shim/shiv HTML5. Mettez le code HTML suivant dans votre <head>:

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
+0

Ah ouais, c'est ça, j'ai oublié que le CSS devait être mis en action avec 'display: block' Je suis en train d'utiliser le Shiv si vous jetez un oeil à la ligne 20. Merci! –

0

Quelle partie ne fonctionne pas exactement? L'élément <canvas> semble s'afficher correctement, votre conteneur <article> n'est pas ignoré.

Je suis en FF3.6.2, btw. Les seules erreurs CSS que je vois ne sont que: les erreurs CSS.

0

J'ai rencontré un problème avec l'élément "figure", ne montrant pas l'image de fond. donc je résoudre le problème avec ce ...

background-image:url("../img/login_bg.jpg"); 
background-position:center center ; 
background-repeat:no-repeat; 
background-size:cover; 

Cela n'a pas fonctionné ... fond : rgba (0, 0, 0, 0) url ("../ img/login_bg.jpg") centre du centre de défilement/couvercle;

Questions connexes