What's causing this difference in rendering between Webkit and Gecko + Trident?
I've submitted this to the Webkit bugzilla (including full CSS and HTML) a week ago but didn't receive a response so far. In the mean time, I'd like to know if it's me or Webkit doing something strange. I already found a workaround, just looking for answers on what's exactly causing this difference.
Here's what I'm experiencing:
Tested in Chrome 10.0.648.204, Safari 5.0.3 (7533.19.4), Firefox 4.0 and a version of IE 8.
This is the related code. I already isolated this code in the HTML to see if surrounding objects caused the trouble but the problem remains.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[...]
<div id="top">
<div id="logo">
<a href=""><strong><span style="color: #005288;">pre</span><span style="color: #00aeef;">view</span></strong> <span style="color: #fcaf17;">website</span></a>
</div>
<div id="topmenu">
<ul>
<li><a href=""><span>over</span> ons</a></li>
<li><a href=""><span>onze</span> partners</a></li>
<li><a href="">contact</a></li>
<li><a href="">helpdesk</a></li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
And the CSS:
#container, #top, #contentcontainer {
padding: 12px;
}
#logo {
float: left;
margin: 0;
font-size: 2em;
letter-spacing: -2px;
}
#topmenu ul, #mainsubmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#topmenu li, #mainsubmenu li {
display: inline;
}
#topmenu li {
margin-left: 20px;
}
#topmenu li:first-child {
margin-left: 0;
}
#topmenu a {
color: #005288;
}
#topmenu a:hover {
color: #00aeef;
}
#topmenu a span {
color: #005288;
}
I started by measuring all the divs to see if they had the same, auto-calculated sizes in both Gecko and Webkit, and they all have the exact same measurements for width (but of course the height is different on Webkit). It's 390 px in Chrome's Firebug lite as well as in Firefox (4) DOM-inspector.
Even if those 390 pixels wouldn't have been enough to fit the full list, the div could simply have expanded to the left. This could perhaps be the case when fonts render a little differently or
What's also strange is that if I remove
#topmenu li:first-child {
margin-left: 0;
}
from the CSS, that doesn't do anything to the position of the first element in the list. Instead, it changes the position of the LI on the second line! "Helpdesk" will then align with "Over ons" strangely enough.
My workaround: If I define a fixed width for开发者_StackOverflow社区 the topmenu DIV of at least 390 (current width) plus 20 pixels (the margin I remove using first-child) for a minimum total fixed width of 410 pixels, all elements stay on the same line.
Love to hear what everyone has to say on this.
I created a jsfidle and tested it in Chrome and Firefox, but I can't reproduce your findings. Have you perhaps got more/different html/css than the fragments you posted? I get basically the same thing in both browsers and the margin applied on #topmenu li:first-child does what it is supposed to do in both as well.
I have Chrome 10 and Firefox 3.6.16 on a Mac with Snow Leopard.
This is Chrome:
And Firefox:
I've figured out what's wrong: you're using an explicit web page width. Because of this, the last item doesn't fit even if the browser window is wide enough, because you aren't giving it enough space. To fix this, don't specify a width for your web page and redo your CSS to adapt to the width of the browser window.
加载中,请稍侯......
精彩评论