Das folgende html und css zeigt zwei divs innerhalb eines Containers. Das linke div ist nicht schwebend; das richtige div ist nach rechts geschwebt.
Das rechte div scheint ein Pixel zu schmal zu sein, und die rote Hintergrundfarbe des Containers zeigt sich daher in dieser einen Pixellücke.
Das ist eine Vereinfachung meines Problems. Ссылка
HTML
%Vor%CSS
%Vor%Es ist nicht der Float, der das Problem verursacht. Es ist die prozentuale Breite. In FF und IE funktioniert es einwandfrei, aber Chrome berechnet die prozentuale Breite so, dass nicht immer die Pixel auf die vollen 100% summieren. Versuchen Sie einfach, die Fensterbreite geringfügig zu ändern, und Sie werden bemerken, dass zusätzlich 1 px verschwindet / manchmal erscheint.
Wie vermeide ich dieses Verhalten? Sie müssen den gleichen Prozentsatz irgendwie verwenden, also wird es genau genau gleich berechnet. Die rechte Seitenleiste ist 40% breit, Sie müssen also einen rechten Rand von 40% für das Inhalts-Div haben (diese 40% sind 40% des enthaltenen Blockelements)
%Vor%Für alle, die in Zukunft zu diesem Thema kommen, ist es möglich, die linke Seitenleiste / den Inhalt / die rechte Seitenleiste mit flüssigen Schwimmern zu erstellen. Es könnte so gemacht werden:
Container div
Breite der rechten Leiste: 30%, Float: rechts; Rand: 0; Auffüllung: 0;
content width: 40%; float: rechts; margin: 0; padding: 0;
Rand der linken Seitenleiste rechts: 70%; Rand: 0; Auffüllung: 0;
Endcontainer div
Vorausgesetzt, dass alle Container einen Rand haben: 0; Auffüllung: 0; dann funktioniert das in FF, IE, Chrome, Safari und Opera (aktuell) problemlos. Genius. Die dubiosen Browser sollten dieses Problem schon vor langer Zeit gelöst haben - man kann nur vermuten, dass Webdesigner nicht oft eine pixelgenaue Platzierung von Sidebars benötigen, da sonst der Browserbauer enorm unter Druck geraten wäre.
Du hast dort zwei schussfreie Räume. & amp; nbsp; character verursacht das 1px extra Leerzeichen auf der linken Seite der rechten Seitenleiste. Btw, position: relative ist in diesem Kontext überflüssig (es ist nur nützlich, wenn Sie etwas in IE6 reparieren müssen).
Tags und Links css google-chrome css-float