Chrome question mise en page liquide

Question

J'ai un div avec cette classe:

.header { 
    width: 100%; 
    height: 10%; 
} 

Si vous inspectez cela avec un outil de développement web, vous pouvez voir comment navigateur calculer la largeur et la hauteur d'un élément:

IE 9 -> 854,24 x 26,05

Firefox 15.01 -> 854 x 28

Safari 5.1.7 -> 843 x 27

Chrome 22.0.1229.94 m -> 951 x 36

Maintenant, comme vous pouvez le lire ci-dessus, Chrome calcule le% d'une manière différente. Comment je peux résoudre ça? Est-ce un bug? Safari utilise aussi le webkit mais n'a pas ce problème.

Answer 1

Ce que vous voyez est un calcul basé sur la taille de la vue, html et les balises de corps. Si la fenêtre d'affichage, la zone que vous voyez dans votre fenêtre, change, la taille de html-> body-> div va de même. Juste ajouter une autre barre d'outils va changer ces tailles. Ceci est l'un des objectifs de "responsive web design" où le contenu détermine la taille de l'élément et nous ne devons plus baser la mise en page sur le nombre de pixels sur un périphérique. Mais ce serait vraiment en profondeur et hors sujet.