it-swarm.com.de

1 Pixel Höhenunterschied zwischen Firefox und Chrome

Arbeiten an einem neuen Site-Design in asp.net mit Masterseiten. Kopfzeile der Seite ist eine 35px große "Menüleiste", die ein asp-Menüsteuerelement enthält, das als ungeordnete Liste dargestellt wird.

Der ausgewählte Menüpunkt ist mit einem farbigen Hintergrund und einem 2px-Rahmen um die linke obere und rechte Seite gestaltet. Der untere Teil des ausgewählten Menüelements sollte mit dem unteren Rand der Menüleiste übereinstimmen, sodass die ausgewählte "Registerkarte" so aussieht, als ob sie in den darunter liegenden Inhalt fließt. Sieht in Firefox und IE gut aus, aber in Chrome scheint der "Tab" 1 Pixel höher als der untere Rand der Menüleiste zu sein.

Ich frage mich nur, ob es einen Fehler gibt, von dem ich nichts weiß. 

Mir ist klar, dass Sie höchstwahrscheinlich Code benötigen, um bei diesem Problem zu helfen.

BEARBEITEN:

hier ist die CSS für das Menü ...

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;
}

Die ausgewählten Klassen werden über jquery zum li und einem Element hinzugefügt ...

Hier ist ein Screenshot des Problems ..... Das Chrom-Beispiel befindet sich oben und Sie können 1 Pixel roten Rand unter der Registerkarte sehen. Unten ist das Firefox-Bild, wo alles in Ordnung aussieht.

alt text

BEARBEITEN:

Nachdem ich damit ein bisschen herumgespielt habe, habe ich herausgefunden, dass es eigentlich der "Header" div ist, der um 1px in Chrom wächst ... Dies scheint mir sehr seltsam zu sein.

23
stephen776

Es ist wichtig zu wissen, dass Webseiten in verschiedenen Browsern immer unterschiedlich dargestellt werden. Pixel-Perfektion zu erreichen ist vergeblich, und heutzutage versuche ich meinen Kunden zu erklären, welche Kosten anfallen, damit jeder Browser die Site genau gleich rendert. Sie verstehen jetzt häufiger, dass IE6 und FF4 keine Seite auf dieselbe Weise darstellen. Wir müssen versuchen, dass unsere Kunden die Dynamik des Webs verstehen und verstehen.

Progressive Verbesserung und grazile Degradierung. Frieden. 

0
Niklas Wulff

Keine dieser Antworten löst das Problem.

Einstellen:

line-height: 1;
padding-top: 2px;

Da Webkit- und Mozilla-Rendering-Engines die Zeilenhöhe unterschiedlich implementieren, verwenden Sie diese Option nicht zum Manipulieren der Messung für einzelne Werbebuchungen. 

Setzen Sie für Elemente wie Menüs, Schaltflächen und besonders kleine Benachrichtigungsblasen die Zeilenhöhe auf Normal zurück, und verwenden Sie die Auffüllung oder Ränder, damit sich diese gleich verhalten.

Hier ist ein JSFiddle, das dieses Problem veranschaulicht: http://jsfiddle.net/mahalie/BSMZe/6/

64
mahalie

Ich hatte gerade das gleiche Problem und löste es, indem ich explizit die Zeilenhöhe und die Schriftgröße in <li> -Element festlegte, das die <a>-Elemente enthält, die die Tab-Links sind. Hoffe das hilft jemand in der Zukunft.

(bearbeitete HTML-Links)

14
Jarrett

Dies ist ein häufiges Problem, auf das ich bei einigen meiner Websites stoße ... Wenn es bei IE den Pixelunterschied gibt, kann ich normalerweise nur ein Pixel mit Rand/Abstand in meinem IE - Stylesheet hinzufügen. Wenn es sich jedoch um Safari/FireFox/Chrome handelt, lebe ich normalerweise nur mit dem Pixel und mache die FireFox-Menge glücklich (vorerst - bis Webkit das Web regiert!), Auch wenn es im gegenüberliegenden Browser ein wenig seltsam aussieht.

Sie können jedoch auch die Werte für die Zeilenhöhe auschecken (oder einen Wert hinzufügen, falls noch keiner vorhanden ist) für das enthaltende Element ul oder div. Durch das Herumbasteln konnte ich die Polsterung in FireFox, Chrome und IE exakt gleich einstellen.

3
geerlingguy

Hier ist die Lösung, die ich in diese Seite gefunden habe:

   button::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
3
Maxulus

Ich habe jetzt schon eine Weile mit diesem Problem gekämpft und hätte fast das Pixel aufgegeben. In einem dieser eurika-Momente ist es jedoch zu mir gekommen: Wenn Sie die Registerkarte perfekt in Chrome aneinandergereiht haben (was eine Überlappung in Firefox zulässt), setzen Sie die ul-Höhe auf die Höhe des li (einschließlich aller Polsterungen), und Sie können sie entfernen die störenden Pixel in Firefox, indem Sie den Überlauf auf der ul.

Hoffe das hilft jemandem da draußen! 

2
DJ Quilter

Ich hatte das gleiche Problem mit meinen Hauptregisterkarten, die sie in Chrome anzeigen. Sie waren um ein Pixel in der Höhe und hatten einen unschönen Spalt zwischen den Registerkarten und dem weißen Hintergrund des Mainframes. 

Ich löste das Problem, indem ich dem Tab div einen oberen Rand mit einem Floatwert gab. Zuerst Margin-Top ausprobiert: 0.1px nichts, dann 0.2 usw., bis mit einem oberen Rand von 0.5 alles über alle gängigen Browser angezeigt wurde.

1
Alexander

Ich hatte genau das gleiche Problem, stellte sich heraus, dass der Zoom auf 110% eingestellt war und das Menü gebrochen wurde. Ich habe es bemerkt, als ich Chrom auf einem anderen Computer hochgefahren habe und es sah gut aus.

1
artfulhacker

Ich bin auf dieses Problem in Bezug auf Text mit transparentem Hintergrund gestoßen.

Ich konnte keine der oben genannten Lösungen dazu bringen, durchgehend zu funktionieren. Daher benutzte ich einen Webkit-Hack, um diesen Browsern eine andere Zeilenhöhe zu geben. So wie:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .your-class {
        line-height:20px;
    }
}

Eww, hackig! Ich versuche, CSS-Hacks zu vermeiden, aber ich konnte keinen anderen Weg finden. Ich hoffe das hilft jemandem.

0
kdev

Ich konnte dieses Problem mit einer Webschrift lösen, mit der ich arbeitete, indem ich Folgendes festlegte:

.some-class {
    display: inline-table;
    vertical-align: middle;
}

Zugegeben, es ist ein bisschen hackig, macht aber den Job. Es bedeutet jedoch, dass Sie Zielstile speziell für Internet Explorer haben

0
SomeBloke

sie können auch verschiedene CSS für Mozilla machen:

-moz-height:2em;

man kann auch benutzen:

@-moz-document url-prefix{
    // your css
}
0
shekhar patel

Ich denke, dies ist der einzige Weg, verschiedene Stile für verschiedene Browser zu verwenden, um die problematischen Abschnitte zu verwenden 

/* 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;
}``
0
insaneray

versuchen Sie es mit display: block mit dem Element " zB ...

<li><a href="">Link</a></li>

css:

li{line-height:20px;}/*example only*/

li a{display:block;}
0
Manny

Ich hatte ein ähnliches Problem und es lag an der Verwendung von ems für Schriftgrößen, Ränder und Füllzeichen. Die Browser rundeten die Ems unterschiedlich und verursachten, abhängig von der Länge des Inhalts, auf der gesamten Site intermittierende Off-by-1px-Probleme. Nachdem ich alles auf Pixelmaße geändert hatte, waren meine Probleme verschwunden.

Hoffe das hilft!

0
gregtheross

wenn line-height zum vertikalen Ausrichten von Text in einem Container verwendet wird (was nicht der Fall sein sollte), kann das konsistente Verhalten in Browsern wie folgt durchgesetzt werden:

line-height: 75px
height: 75px
overflow: hidden
0
Mario