Différence de hauteur d'une ligne de pixel entre Firefox et Chrome
Travailler sur un nouveau design de site en asp.net avec des pages maîtres. En-tête de la page est une "barre de menus" de 35 pixels de haut qui contient un contrôle de menu asp rendu sous forme de liste non ordonnée.
L'élément de menu sélectionné est stylé avec un arrière-plan de couleur différente et une bordure de 2 pixels autour des côtés supérieur gauche et droit. Le bas de l'élément de menu sélectionné doit s'aligner sur le bas de la barre de menus pour que "l'onglet" sélectionné ait l'air de se retrouver dans le contenu situé en dessous. Ça a l'air bien dans firefox et IE, mais en chrome, "l'onglet" semble dépasser le pixel de la barre de menus.
Je me demandais simplement s'il y avait une sorte de bug que je ne connais pas.
Je me rends compte que vous aurez probablement besoin de code pour vous aider à résoudre ce problème, afin de pouvoir publier le css le plus rapidement possible.
MODIFIER:
voici le css pour le menu ...
div.hideSkiplink
{
width:40%;
float:right;
height:35px;
}
div.menu
{
padding: 0px 0px 0px 0px;
display:inline;
}
div.menu ul
{
list-style: none;
}
div.menu ul li
{
margin:0px 4px 0px 0px;
}
div.menu ul li a, div.menu ul li a:visited
{
color: #ffffff;
display: block;
margin-top:0px;
line-height: 17px;
padding: 1px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
color: #ffffff;
text-decoration: none;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: none;
border-left: 1px solid #fff;
}
div.menu ul li a:active
{
background:#ffffff !important;
border-top:2px solid #a10000;
border-right:2px solid #a10000;
border-bottom: none;
border-left:2px solid #a10000;
color: #000000 !important;
font-weight:bold;
}
div.menu ul a.selected
{
color: #000000 !important;
font-weight:bold;
}
div.menu ul li.selected
{
background:#ffffff !important;
border-top:2px solid #a10000;
border-right:2px solid #a10000;
border-bottom: none;
border-left:2px solid #a10000;
}
div.menu ul li.selected a:hover
{
border: none;
}
Les classes sélectionnées sont ajoutées au li et aux éléments via jquery ...
Voici une capture d’écran du problème ........ L’exemple de chrome est en haut et vous pouvez voir 1px de bordure rouge sous l’onglet. En bas se trouve l'image firefox où tout semble aller pour le mieux.
MODIFIER:
Après avoir joué un peu plus avec cela, j'ai découvert que c'est en fait la division "en-tête" elle-même qui croît de 1 pixels en chrome ... Cela me semble très étrange.
Il est important de réaliser que les pages Web seront toujours rendues différemment selon les navigateurs. Il est inutile de parvenir à la perfection au pixel et, à présent, j’essaie d’expliquer à mes clients les coûts induits pour que chaque navigateur rende le site exactement identique. Plus souvent maintenant, ils comprennent qu'IE6 et FF4 ne rendront jamais une page de la même manière. Nous devons essayer de faire comprendre à nos clients la dynamique du Web et de l’adopter.
Amélioration progressive et dégradation progressive. Paix.
Aucune de ces réponses ne résout le problème.
Ensemble:
line-height: 1;
padding-top: 2px;
Comme les moteurs de rendu webkit et mozilla implémentent différemment la hauteur de ligne, ne l'utilisez pas pour manipuler les mesures d'éléments individuels.
Pour les éléments tels que les menus, les boutons et surtout les très petites bulles de notification, réinitialisez la hauteur de ligne à la normale et utilisez un remplissage ou des marges pour que leur comportement soit identique.
Voici un JSFiddle illustrant ce problème: http://jsfiddle.net/mahalie/BSMZe/6/
Je viens d'avoir ce même problème et je l'ai résolu en définissant explicitement la hauteur de ligne et la taille de la police dans l'élément <li> qui contient les éléments <a> qui constituent les liens de tabulation. J'espère que cela aidera quelqu'un dans le futur.
(liens HTML édités)
C'est un problème commun que je rencontre sur certains de mes sites ... quand IE présente la différence de pixels, je peux généralement simplement ajouter un pixel de marge/remplissage dans ma feuille de style IE. Mais lorsqu'il s'agit de Safari/FireFox/Chrome, je vis généralement avec le pixel et rend la foule FireFox heureuse (pour l'instant, jusqu'à ce que Webkit gouverne le Web!), Même si cela semble un peu étrange dans le navigateur opposé.
Toutefois, vous pouvez également consulter les valeurs de hauteur de ligne (ou ajouter une valeur, s'il n'en existe pas déjà) sur l'élément contenant la variable ul ou div. Bricoler avec ça m'a permis d'obtenir le même remplissage dans FireFox, Chrome et IE.
Voici la solution que j'ai trouvée dans cette page :
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Je me bats avec ce problème depuis un moment maintenant et j'ai presque abandonné le pixel. Cependant, cela m'est arrivé dans l'un de ces moments eurika: si l'onglet est parfaitement aligné dans Chrome (ce qui laisse un chevauchement dans Firefox), réglez la hauteur ul sur celle du li (y compris le rembourrage éventuel), puis supprimez les pixels incriminés dans Firefox en définissant overflow sur hidden sur le paramètre ul.
J'espère que cela aide quelqu'un là-bas!
J'ai eu le même problème avec mes onglets principaux qui les affichent dans Chrome: ils étaient d'un pixel en hauteur et laissaient là une vilaine fente entre les onglets et l'arrière-plan blanc de l'ordinateur central.
J'ai résolu le problème en donnant à l'onglet div une marge supérieure avec une valeur flottante. D'abord essayé margin-top: 0.1px rien puis 0.2 etc. jusqu'à ce que, avec une marge supérieure de 0.5, tout s'affiche correctement sur tous les principaux navigateurs.
J'avais exactement le même problème. Le zoom du chrome était réglé à 110% et cela rompait le menu. Je l'ai remarqué lorsque j'ai activé Chrome sur un autre ordinateur et que tout allait bien.
J'ai rencontré ce problème en relation avec du texte avec des arrière-plans transparents.
Je ne pouvais obtenir aucune des solutions ci-dessus pour fonctionner de manière cohérente alors j'ai fini par utiliser un hack webkit pour donner à ces navigateurs une hauteur de ligne différente. Ainsi:
@media screen and (-webkit-min-device-pixel-ratio:0) {
.your-class {
line-height:20px;
}
}
Euh, hacky! J'essaie d'éviter les piratages CSS mais je ne pouvais tout simplement pas trouver un autre moyen. J'espère que cela aide quelqu'un.
J'ai réussi à résoudre ce problème avec une police Web sur laquelle je travaillais en définissant les paramètres suivants:
.some-class {
display: inline-table;
vertical-align: middle;
}
Certes, c'est un peu hacky, mais fait le travail. Cela signifie que vous aurez des styles de cible spécifiques à Internet Explorer.
vous pouvez aussi faire différents css pour mozilla:
-moz-height:2em;
on peut aussi utiliser:
@-moz-document url-prefix{
// your css
}
J'imagine que c'est le seul moyen, utilisez des styles différents pour les différents navigateurs, les sections problématiques
/* FOR MOZILLA */
@-moz-document url-prefix() {
.selector {
color:Lime;
}
}
/* FOR CHROME */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome, if Chrome rule needed */
.container {
margin-top:100px;
}
/* Safari 5+ ONLY */
::i-block-chrome, .container {
margin-top:0px;
}``
essayez d’afficher: bloc avec l’élément a "
<li><a href="">Link</a></li>
css:
li{line-height:20px;}/*example only*/
li a{display:block;}
J'avais un problème similaire, dû à l'utilisation d'ems pour les tailles de police, les marges et le remplissage. Les navigateurs arrondissaient les ems différemment et provoquaient des problèmes intermittents de 1 pixel sur tout le site, en fonction de la longueur du contenu. Une fois que j'ai tout changé en pixels, mes problèmes ont disparu.
J'espère que cela t'aides!
si line-height est utilisé pour aligner verticalement du texte dans un conteneur (ce qui ne devrait pas être le cas), le comportement cohérent d'un navigateur à l'autre peut être appliqué de la manière suivante:
line-height: 75px
height: 75px
overflow: hidden