Le navigateur de Google, Chrome, est basé sur Safari, le navigateur d’Apple. Ce sont deux excellents navigateurs, à mon sens aussi bons que Firefox. Leur seul défaut à mon sens est de ne pas permettre l’intégration de plugin. Hélas, malgré la qualité de ces navigateurs, il peut arriver que leur rendu diffère de celui de Firefox ou des différents Internet Explorer.
Bien que je répugne à utiliser des hack CSS, cela peut tout de même, de temps à autre, s’avérer utile, voire salvateur. Voici donc, à l’instar du célèbre « [if IE] » permettant de contrecarrer les nombreux « caprices » d’un navigateur largement décrié, un hack fonctionnant parfaitement pour Chrome et Safari :
#ma_div { height: 340px; width: 1000px; position: relative; margin-left: 200px; } /* hack Chrome / Safari */ @media screen and (-webkit-min-device-pixel-ratio:0) { #ma_div { width: 600px; } } |
Comme vous pouvez le constater, le principe est simple : il suffit d’écraser la propriété CSS mal interprétée pour la remplacer, à l’interieur du hack, par celle permettant d’obtenir l’effet souhaité sous Chrome ou Safari.
A consommer avec modération…
