Frage stellen
ich bau grad an einem horizontalen Menu mit fixen Höhenangaben und muss zu meinem Entsetzen feststellen, dass der IE den Text 1 Pixel tiefer darstellt als es FF oder Opera machen.
Beispiel: Unterschiedliche Textdarstellung FF vs. IE
Ist das ein bekannter Bug, hat das was mit der Rendering-Maschine des IE zu tun und kann man dem ganzen irgendwie entgegnen?
Den Code hab ich mal soweit ausgemistet, dass nur noch Grundsätzliches übrigbleibt, allerdings wegen der zentrierten horizontalen Darstellung der Menüpunkte auf den ersten Blick etwas viel.
Den Code fürs Menu hab ich übrigens von hier http://xhtmlforum.de/40267-faq-h-ufig-gestellte-fragen-und.html#faq13 , sollte ihn jemand nachlesen wollen.
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<!--
body, ul, li, span {
margin:0;
padding:0;
}
ul, li {
list-style-type:none;
}
#navigation {
display:table;
margin:0 auto;
padding:0;
white-space:nowrap;
color:#fff;background-color:#0066cc;font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:14px;
line-height:1;
}
ul {
display:table-row;
white-space:nowrap;
}
li {
display:table-cell;
vertical-align:top;
}
.menuPoint {
height:25px;
}
/* --- ie lt8 fix --- */
* html #navigation {
text-align:center;
}
*:first-child+html #navigation {
text-align:center;
}
* html #navigation ul,
* html #navigation li {
display:inline;
zoom:1;
}
*:first-child+html #navigation ul,
*:first-child+html #navigation li {
display:inline;
zoom:1;
}
* html .menuPoint {
float:left;
}
*:first-child+html .menuPoint {
float:left;
}
-->
</style>
<title>Unterschiedliche Textdarstellung FF vs. IE</title>
</head>
<body>
<div id="navigation">
<ul>
<li>
<div class="menuPoint">
<span>Dieser Text soll in allen Browsern den gleichen Abstand zum oberen Rand aufweisen.</span>
</div>
</li>
</ul>
</div>
</body>
</html>
Das Menu ist Teil eines CMS und daher Text auf Hintergrundgrafik.
Ein Vollgrafikmenu kommt nicht in Frage.
Die Menupunkte sind einzeilig (line-height:1).
Da die Font-Angaben in Pixel gemacht und line-height sowie margin und padding angegeben sind muss die unterschiedliche Ausgabe wohl in der Interpretation der Browser liegen.
Möglicherweise spielt auch noch das Betriebssystem selbst eine Rolle.
Leider ist 1 Pixel Unterschied, wenn man ein genaues Design erzielen will, sehr viel...
Sollte irgendwer ne brauchbare Idee haben oder nen Ansatz wissen, wie man Texte in IE und FF pixelgenau darstellen kann würd mich das sehr freuen.
Vielen Dank im Voraus für jede Hilfe.
Schöne Grüße
Projecta
