Affichage différent entre Chrome et Firefox

**Crackerz** · 05/05/2014, 01h36

Bonsoir,

Je viens de développez une petite interface sous Mozilla Firefox, cependant le résultat n'est pas le même dans Google Chrome.
Effectivement tout les sites que je visualises sous Google Chrome sont affiché avec une vision "plus éloignée" (élément plus petit donc). Dans mon cas contrairement au site en ligne cela décale des éléments inline-block à la prochaine ligne, les margin:X px non pas le même effet donc cela décale les choses.

Savez-vous comment dois-je m'y prendre pour avoir un résultat similaire ?

Merci.

**kOrt3x** · 05/05/2014, 09h51

Est-ce que tu fais un reset CSS avant ?

**Bisûnûrs** · 05/05/2014, 10h55

Ne pas oublier non plus de remettre le zoom du navigateur à 0 (Ctrl+0).

**Crackerz** · 05/05/2014, 12h11

Bonjour,

Le zoom est bien à "normal" sur les deux navigateurs.

Est-ce que tu fais un reset CSS avant ?

Non mais je viens de le faire et ça ne change rien (reset meyer).

Je pensai que cela pouvait venir du fait que j'utilise tout le temps l'unité px pour les longueurs mais l'affichage étant sur le même écran cela ne devrait pas poser de problème, non ?

**Bisûnûrs** · 05/05/2014, 12h27

Sans plus d'éléments à se mettre sous la dent, on pourra difficilement t'aider.

Il nous faudrait genre :
- des screenshots ;
- du code ;
- une URL qui représente ton problème.

Au moins un de la liste, au mieux les trois.

**Crackerz** · 05/05/2014, 13h04

Nom : firefox.png
Affichages : 1357
Taille : 189,1 Ko

Nom : chrome.png
Affichages : 1371
Taille : 117,3 Ko

Donc voici le jeu d'essai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
   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;
            }
 
	    header {
                color:white;
                position:fixed;
                top:0;
                width:100%;
	        text-transform:uppercase;
                background-color:green;
            }
 
	    header>h1{
		display:inline;
                vertical-align: middle;
                margin-left:200px;
                font-size: 1.8em;
                color:red;
	    }
 
	    header nav {
                display:inline-block;
                margin-left: 55px;
                width:610px;
                border:1px solid red;
            }
 
	    header nav ul {
                margin: 0;
                padding: 0;
                width: inherit;
                list-style: none;
            }
 
            header nav ul li {
                margin: 0;
                font-size: 0.9em;
                display:inline-block;
                text-transform: uppercase;
            }
 
            header nav ul li a {
                display:block;
                width: 90px;
                padding: 8px;
                color:black;
                text-align:center;
                text-decoration: none;
                cursor:pointer;
            }
 
	   section{
		padding-top:80px;
		text-align:justify;
		margin:auto;
		width:960px;
		border:1px dotted black;
			}

Une partie du HTML basique :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
		<header>
			<h1>Titre</h1>
			<nav>
                <ul>
                    <li><a href="">Lien 1</a></li>
                    <li><a href="">Lien 2</a></li>
                    <li><a href="">Lien 3</a></li>
				</ul>
		</header>
		<section>
		....
		</section>
		</body>
		</html>

Comme vous pouvez l'observer le titre en rouge n'est pas exactement à la même position selon les deux navigateurs.
Je suis preneur pour toutes critiques sur comment est organisé mon code css, merci.

Affichage différent entre Chrome et Firefox

CSS

Vue hybride

Discussions similaires

Partager

Partager