Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Rendu différent d'IE 10

19 réponses
Avatar
GR
Bonsoir,

Je m'aperçois d'une différence de rendu avec IE 10 en HTML 5 au niveau
des "line-height" voir http://www.grenault.net

Avec IE 10 les lignes sont plus rapprochées qu'avec FF, Opera, Safari et
Chrome.

Connaissez-vous un moyen de contourner ce problème ?

Merci.

--
Site : http://www.grenault.net
Cours photo : http://www.grenault.net/tech.htm
Home cinéma : http://www.grenault.net/homecine.htm

9 réponses

1 2
Avatar
GR
Le 04/05/2013 10:54, SAM a écrit :
Le 04/05/13 08:33, GR a écrit :
Le 04/05/2013 01:21, SAM a écrit :

Encore que ... ce que tu avances ne vaut que pour *toi*.
Par exemple *mon* Safari affiche en caractères bien plus gros que *mon*
Firefox.
(parce que je les ai réglés comme ça)

Que sais-tu du réglage du navigateur (qu'il soit IE ou autre) qui
viendra lire tes pages ?



Voici les images écran :



Bon ... pas de remarque/réponse à mes remarques ...

http://cjoint.com/?CEeiDxpwMQk IE 10



Ha! oui ! IE commence à y arriver on dirait.
C'est en HTML.5 ?
(pas vu de styles de transition, donc HTML.4, non?)

http://cjoint.com/?CEeiFjcbrnU FF 20.01



Pas de différence, non ?
Si ? Où ça ?

Même pb que Sergio avec mon Fx
Pendant que Chrome fait comme chez toi (boutons + champs alignés)

Qui va voir ? Peu en effet (environ 250 par jour)



Non, pas "qui" mais "avec QUOI" est la question à se poser.




Pour ces menus :
=============== >
ton code :
<div class="menu-cadre">
<a class="sousmenu" href="mail.htm"></a><br>
<a class="sousmenu" href="livre_or.htm"></a><br>
tes css :
.menu-cadre {
width: 100px;
text-align: left;
margin-left: auto;
margin-right: auto;
line-height: 12px;
}
.sousmenu {
font-size: 12px;
color: white;
}

mon code :
<div class="menu-cadre">
<a href="mail.htm"></a>
<a href="livre_or.htm"></a>
mes css :
.menu-cadre {
width: 100px;
text-align: left;
margin-left: auto;
margin-right: auto;
line-height: 12px;
}
.menu-cadre a {
display: block;
padding: 0 4px;
margin: 0;
font-size: 12px;
color: white;
}
.menu-cadre a:hover {
color: maroon;
padding-left: 9px;
}



C'est quoi ça ?
============== > <script type="text/javascript">
function Redirection() {
if (confirm("Aller sur la version mobile du site ?")) {

Il y a *deux* versions du site ?
Une FdS pour les mobiles ne suffirait pas ?
(et le truc pour qu'ils en tiennent compte)

<link rel="stylesheet" href="mobiles.css" type="text/css"
media="handheld" />

voir :
<http://www.alsacreations.com/article/lire/930-css3-media-queries.html>
pour + d'infos et de subtilités.



Cordialement,



Merci Sam, je vais regarder tes suggestions attentivement.

J'ai donc tenté de corriger le problème d'affichage en bas avec le
moteur de recherche. Est-ce bon aussi chez toi, maintenant ?

Voici mes gentils visiteurs :

Navigateur Visites Pages/visite Durée moy. de la visite Nouvelles
visites (en %) Taux de rebond
1. Chrome 1 506 1,58 00:02:19 74,04 % 73,24 %
2. Firefox 1 443 1,64 00:01:09 82,05 % 78,86 %
3. Internet Explorer 1 137 1,78 00:01:22 81,27 % 77,13 %
4. Safari 1 102 1,31 00:00:53 67,88 % 83,67 %
5. Android Browser 239 1,73 00:01:16 74,48 % 70,71 %
6. Opera 65 1,48 00:00:36 76,92 % 86,15 %
7. Safari (in-app) 48 1,31 00:01:09 87,50 % 75,00 %
8. IE with Chrome Frame 14 1,64 00:01:36 85,71 % 71,43 %
9. SeaMonkey 11 1,00 00:00:00 90,91 % 100,00 %
10. Mozilla Compatible Agent 8 1,12 00:00:10 100,00 % 87,50 %

--
Site : http://www.grenault.net
Cours photo : http://www.grenault.net/tech.htm
Home cinéma : http://www.grenault.net/homecine.htm
Avatar
GR
Le 04/05/2013 11:33, Pierre Maurette a écrit :
GR :

[...]

Il faudrait que je trouve un simulateur Linux/FF...



Vous pourriez tout simplement utiliser VirtualBox, ou équivalent. Ça
couvre pas mal des besoins qui semblent vous préoccuper, même ceux qui
peuvent paraître superflus:
- Un Windows 2000, pour un vrai IE6. Vous y aurez également FF12.
Ajoutez MultipleIEs si ça vous amuse. Vous pouvez y configurer IIS si
par hasard vous en aviez besoin.
- Un Windows XP, pour un vrai IE8.
- Un Windows récent, en bac à sable, pour y faire des bêtises
tranquillement, utiliser des environnements de développement un peu
invasifs, ou incompatibles avec d'autres. Bon endroit pour IETester par
exemple.
- Une (ou plus) distribution Linux en cliquodrome, Debian me convient,
pour les navigateurs soit dans le version des dépôts, soit dans leur
dernière version.
- Un vrai serveur d'évaluation. Qui sera configuré au plus près du
serveur de production. Par exemple une Debian, même avec plusieurs
serveurs, se contentera de moins de 128Mo de mémoire, pour peu que la
charge soit faible.
- etc. etc.

Pour toutes ces machines, vous bénéficiez de la possibilité de créer des
snapshots, voire des branches. Vous pouvez même en créer à la hache, par
copie de fichiers.
Vous pouvez allègrement y nettoyer votre historique, vos caches et
autres traces, cookies compris, avant un test, sans crainte que ça vous
manque, même s'il existe également les profils de Firefox pour faire à
peu près la même chose.
Vous pouvez choisir une résolution réellement simulée, non pas en
contraignant le navigateur, mais la machine dans laquelle il tourne.
L'ergonomie sera reproduite presque parfaitement. /presque/, parce que
les pixels n'auront pas nécessairement la même taille ni la même géométrie.
Il y a de nombreux autres avantages, moins - ou pas du tout - en rapport
avec le développement web.

Bref, la virtualisation, c'est que du bonheur ;-)




Je vais regarder quand j'aurais un moment.

Merci.

--
Site : http://www.grenault.net
Cours photo : http://www.grenault.net/tech.htm
Home cinéma : http://www.grenault.net/homecine.htm
Avatar
Sergio
Le Sat, 04 May 2013 11:31:12 +0200, GR a écrit :

C'est Linux qui m.... ou FF pour Linux... C'est bon avec FF, Chrome,
Safari, Opera, Seamonkey, IE8, IE9, IE10, quand même !

Merci pour l'info.



J'ai apporté une toute petite correction. Est-ce mieux ?



Pareil :-(

Sinon, Firebug me signale qu'il y a un "body {background:black;}" qui
traîne dans style.css alors qu'il y a un "body {background:white;}"
dans le fichier HTML.




J'ai encore corrigé, est-ce OK maintenant ?



Toujours pas. Je pense que c'est le réglage de mon FF... Sinon, ça passe
avec Chrome et Opera Linux.

Pour Un simulateur Linux tu peux l'installer dans une machine virtuelle
avec Virtualbox, par exemple.
Avatar
GR
Le 04/05/2013 12:01, Sergio a écrit :
Le Sat, 04 May 2013 11:31:12 +0200, GR a écrit :

C'est Linux qui m.... ou FF pour Linux... C'est bon avec FF, Chrome,
Safari, Opera, Seamonkey, IE8, IE9, IE10, quand même !









Merci pour l'info.









J'ai apporté une toute petite correction. Est-ce mieux ?



Pareil :-(

Sinon, Firebug me signale qu'il y a un "body {background:black;}" qui
traîne dans style.css alors qu'il y a un "body {background:white;}"
dans le fichier HTML.




J'ai encore corrigé, est-ce OK maintenant ?



Toujours pas. Je pense que c'est le réglage de mon FF... Sinon, ça passe
avec Chrome et Opera Linux.

Pour Un simulateur Linux tu peux l'installer dans une machine virtuelle
avec Virtualbox, par exemple.




Et là ?

--
Site : http://www.grenault.net
Cours photo : http://www.grenault.net/tech.htm
Home cinéma : http://www.grenault.net/homecine.htm
Avatar
SAM
Le 04/05/13 11:39, GR a écrit :
Le 04/05/2013 10:54, SAM a écrit :

mon code :
<div class="menu-cadre">
<a href="mail.htm"></a>
<a href="livre_or.htm"></a>
mes css :





Ça permet de pouvoir cliquer sur toute la largeur du menu
(au lieu de devoir viser le texte du lien)


<link rel="stylesheet" href="mobiles.css" type="text/css"
media="handheld" />

voir :
<http://www.alsacreations.com/article/lire/930-css3-media-queries.html>
pour + d'infos et de subtilités.



Merci Sam, je vais regarder tes suggestions attentivement.



J'espère bien !!! ;-)

J'ai donc tenté de corriger le problème d'affichage en bas avec le
moteur de recherche. Est-ce bon aussi chez toi, maintenant ?



OK pour "mon" Firefox.



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 04/05/13 11:39, GR a écrit :

C'est quoi ce widget ?
<div id="MicrosoftTranslatorWidget"
que je ne vois pas ... !

J'ai donc tenté de corriger le problème d'affichage en bas avec le
moteur de recherche. Est-ce bon aussi chez toi, maintenant ?



Mais pourquoi fixes-tu une largeur à cet élément ?
.groupir {
width: 440px;



Moi, j'aurais fait :

<div class="groupir">
<form id="cse-search-box" action="http://www.grenault.net/recherche.htm">
<p>
<a class="plan" title="Découvrez TOUTES les pages !"
href="diversp.htm">Plan du site</a>
<input type="hidden" value="partner-pub-4436697827958348:7732990460"
name="cx">
<input type="hidden" value="FORID:10" name="cof">
<input type="hidden" value="UTF-8" name="ie">
<input type="text" size="30" name="q" style="background:
url(http://www.google.fr/cse/intl/fr/images/google_custom_search_watermark.gif)
no-repeat scroll left center rgb(255, 255, 255);">
<input type="submit" value="Rechercher" name="sa">
<input type="hidden" name="siteurl"
value="www.grenault.net/"></input><input type="hidden"
name="ref"></input><input type="hidden" name="ss">
</p>
</form>
</div>

.groupir { text-align: center; }
.groupir a {
border: 1px solid gray;
border-radius: 5px 5px 5px 5px;
margin-top: 1px;
margin-right: 15px;
padding: 2px 9px;
font-family: Verdana;
font-size: 11px;
text-decoration: none;
color: black;
background: linear-gradient(rgb(255, 255, 255), rgb(211, 211, 211))
no-repeat scroll 0% 0% transparent;
}


à tester avec les IEs ...



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
GR
Le 04/05/2013 12:01, Sergio a écrit :
Le Sat, 04 May 2013 11:31:12 +0200, GR a écrit :

C'est Linux qui m.... ou FF pour Linux... C'est bon avec FF, Chrome,
Safari, Opera, Seamonkey, IE8, IE9, IE10, quand même !









Merci pour l'info.









J'ai apporté une toute petite correction. Est-ce mieux ?



Pareil :-(

Sinon, Firebug me signale qu'il y a un "body {background:black;}" qui
traîne dans style.css alors qu'il y a un "body {background:white;}"
dans le fichier HTML.




J'ai encore corrigé, est-ce OK maintenant ?



Toujours pas. Je pense que c'est le réglage de mon FF... Sinon, ça passe
avec Chrome et Opera Linux.

Pour Un simulateur Linux tu peux l'installer dans une machine virtuelle
avec Virtualbox, par exemple.




Est-ce que c'est bon maintenant ?

Merci !

--
Site : http://www.grenault.net
Cours photo : http://www.grenault.net/tech.htm
Home cinéma : http://www.grenault.net/homecine.htm
Avatar
GR
Le 04/05/2013 10:54, SAM a écrit :
Le 04/05/13 08:33, GR a écrit :
Le 04/05/2013 01:21, SAM a écrit :

Encore que ... ce que tu avances ne vaut que pour *toi*.
Par exemple *mon* Safari affiche en caractères bien plus gros que *mon*
Firefox.
(parce que je les ai réglés comme ça)

Que sais-tu du réglage du navigateur (qu'il soit IE ou autre) qui
viendra lire tes pages ?



Voici les images écran :



Bon ... pas de remarque/réponse à mes remarques ...

http://cjoint.com/?CEeiDxpwMQk IE 10



Ha! oui ! IE commence à y arriver on dirait.
C'est en HTML.5 ?
(pas vu de styles de transition, donc HTML.4, non?)



Oui c'est en HTML 5 et utf-8, sans erreurs, comme d'habitude :-)
IE 10 a fait des progrès considérables. Maintenant il est
presqu'impossible de déceler des différences excepté pour
line-height qu'il ne gère pas de la même manière !

http://cjoint.com/?CEeiFjcbrnU FF 20.01



Pas de différence, non ?
Si ? Où ça ?



Les lignes du menu secondaire sont plus rapprochées.

Même pb que Sergio avec mon Fx
Pendant que Chrome fait comme chez toi (boutons + champs alignés)

Qui va voir ? Peu en effet (environ 250 par jour)



Non, pas "qui" mais "avec QUOI" est la question à se poser.



Je regarde la suite plus tard...

C'est quoi ça ?
============== > <script type="text/javascript">
function Redirection() {
if (confirm("Aller sur la version mobile du site ?")) {

Il y a *deux* versions du site ?



Oui

Une FdS pour les mobiles ne suffirait pas ?
(et le truc pour qu'ils en tiennent compte)



Non

<link rel="stylesheet" href="mobiles.css" type="text/css"
media="handheld" />

voir :
<http://www.alsacreations.com/article/lire/930-css3-media-queries.html>
pour + d'infos et de subtilités.



Cordialement,



Merci !

--
Site : http://www.grenault.net
Cours photo : http://www.grenault.net/tech.htm
Home cinéma : http://www.grenault.net/homecine.htm
Avatar
Pierre Goiffon
Le 04/05/2013 11:33, Pierre Maurette a écrit :
Il faudrait que je trouve un simulateur Linux/FF...



Vous pourriez tout simplement utiliser VirtualBox, ou équivalent.



Excellent conseil !!

j'ai répondu dans un autre fil à ce sujet, pour IE Microsoft donne
depuis plusieurs années des VM, et depuis quelques temps elles sont
disponibles en plein de format et pas seulement le player de Microsoft !

=> http://www.modern.ie/
1 2