[css] google chrome versus les autres

[Sephi-Chan]

:omg: Tu as vraiment développé depuis septembre 2008 sans tester tes sites sur Google Chrome ? :wow:


Pour résoudre une partie de ton problème, tu peux utiliser un reset CSS, qui va harmoniser les feuilles de styles des différents navigateurs. Le plus connu est celui de Eric Meyer.

/* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/



html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

	display: block;

}

body {

	line-height: 1;

}

ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}

Pour tout nouveau site (sur de l'existant, ça implique de tout vérifier), je conseille aussi de définir le [bar]box-sizing[/var] qui permet d'inclure les padding dans la taille explicite d'un bloc.

Un petit article de Paul Irish nous explique en quoi c'est une bonne idée : * { Box-sizing: Border-box } FTW.

html {

  box-sizing: border-box;

}

*, *:before, *:after {

  box-sizing: inherit;

}