nicht angemeldet
Chrome und der vermaledeite Pixel
Hallo,
ich bin über ein Problem mit Chrome/Opera15+ gestolpert, für dass mir gerade jeder Ansatz fehlt: http://jsfiddle.net/x9C2c/
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<div>TESTBOX</div>
ul {
border:0;
margin:0;
padding:0;
}
li {
border:0;
margin:0;
padding:0;
background-color:red;
display:inline;
}
div {
background-color:blue;
border:0;
margin:0;
padding:0;
}
Während in allen anderen Browsern die roten Items direkt an die blaue Box stoßen, gibt es bei Chrome an der Stelle einen 1px breiten weißen Streifen, den ich mir so nicht erklären kann.
Könnt ihr mir sagen, wo der her kommt?
Grüße
Konstantin
-
Hallo,
Während in allen anderen Browsern
Im Firefox ist das Phänomen auch nachvollziehbar. Hier scheint es mit display:inline zusammenzuhängen. Auskommentieren und der Abstand ist weg, aber natürlich auch die gewünschte Anordnung :(
Gruß
Kalk-
Grad nochmal mit FF28 unter Fedora ausprobiert: Bei mir ist da der Streifen nicht da.
Hallo,
Während in allen anderen Browsern
Im Firefox ist das Phänomen auch nachvollziehbar. Hier scheint es mit display:inline zusammenzuhängen. Auskommentieren und der Abstand ist weg, aber natürlich auch die gewünschte Anordnung :(
Gruß
Kalk
-
-
Hallo,
Ich sehe hier keinen Abstand (Chrome 34, Mac), aber es ist durchaus möglich und legitim, dass einer eingefügt wird.
Die Box des Inline-Elements ist nicht notwendig so hoch wie die zugehörige Zeilenbox! Das wird deutlich, wenn du die line-height höher setzt. Die Inline-Box wird in der Zeilenbox gemäß vertical-align ausgerichtet (Standardwert ist baseline).
Siehe auch: http://www.w3.org/TR/CSS21/visuren.html#inline-formatting
Ich würde hier raten, float: left oder display: inline-block zu verwenden. Dann gibt es diese Diskrepanz nicht.
Mathias
-
Ich würde hier raten, float: left oder display: inline-block zu verwenden. Dann gibt es diese Diskrepanz nicht.
Korrektur: Bei display: inline-block gibt’s die Diskrepanz theoretisch auch, schließlich werden diese Elemente genauso wie normale Inline-Boxen in der Zeilenbox positioniert. Allerdings wirkt line-height bei diesen Elementen anders. Die line-height vergrößert die Box.
http://jsfiddle.net/molily/yfurH/2/
Mathias
-
Danke, ich hab jetzt alles hinbekommen.
Ich würde hier raten, float: left oder display: inline-block zu verwenden. Dann gibt es diese Diskrepanz nicht.
Korrektur: Bei display: inline-block gibt’s die Diskrepanz theoretisch auch, schließlich werden diese Elemente genauso wie normale Inline-Boxen in der Zeilenbox positioniert. Allerdings wirkt line-height bei diesen Elementen anders. Die line-height vergrößert die Box.
http://jsfiddle.net/molily/yfurH/2/
Mathias
-
-