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 : 1290
Taille : 189,1 Ko

Nom : chrome.png
Affichages : 1306
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.

**Bisûnûrs** · 05/05/2014, 13h53

En copiant/collant ton code est en l'affichant sur les navigateurs, je n'observe pas ton souci. C'est que le problème doit venir de chez toi.

**Crackerz** · 05/05/2014, 15h21

D'accord, merci Bisûnûrs. Plein de pub s'ouvre avec mon google chrome j'ai du choper une m****....

J'ai une autre question vis-à-vis des éléments en display:inline-block.
Lorsque je zoom ces dernier vont à la ligne lorsqu'il en manque de la place.
Exemple avec le code que je vous ai envoyé si vous zoomer l’élément nav va en dessous du h1...

As-tu une solution à me proposer ?

**Bisûnûrs** · 05/05/2014, 15h38

Il faut que tu englobes tes deux éléments (h1 et nav) d'un troisième auquel tu fixes une largeur.

**Crackerz** · 06/05/2014, 13h10

Merci !

Affichage différent entre Chrome et Firefox

CSS

Discussions similaires

Partager

Partager