3

Below is a small html page that looks different in Chrome vs Firefox browsers. Could anybody please explain why it looks different in Chrome if create an html document locally and open this document via Chrome (jsfiddle shows it normally in Chrome, that's why I didn't create jsfiddle page as well)? enter image description here

<!DOCTYPE html>
<html>
<head>
<title>CCCC</title>
<style>
body * {
text-rendering:optimizeLegibility;
}

body,html {
font-family:Arial,Helvetica,sans-serif;
}

#lesu-tab ul li {
list-style:none;
font-size:14px;
font-weight:700;
float:left;
}

#lesu-tab ul li a {
border:1px solid #888;
display:block;
}

.buggy{
font-size:12px;
}
</style>
</head>
<body>
<div id="lesu-tab">
    <ul>
        <li><a href="http://www.example.com/">Link1</a></li>
        <li><a href="http://www.example.com/">Link2</a></li>
        <li><a class="buggy" href="https://www.example.com/">A ABC DEFGHIJ</a></li>
    </ul>
</div>
</body>
</html>

What makes me even more surprised is that if you change the font size from 12px to 11px or 13px for class="buggy", Chrome displays it not in two lines, but in one - normally.

Also, if you remove one or another one of any css properties on the page, it is displayed in one line as well. That's unclear for me why is this happening? Is this a bug?

Any ideas how to fix it without removing css properties?

And of course the code above is just less than 1% of a huge html page that causes this issue.

Thank you.

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
Haradzieniec
  • 9,086
  • 31
  • 117
  • 212
  • What version are you using? I created a local document and it looks as desired in chrome 38, chromium 39 and firefox 34 on ubuntu – k-nut Dec 05 '14 at 13:52
  • Chrome Version 39.0.2171.71 . Before asking at SO, I asked two persons to show how this code looks on their desktops in Chrome (I don't know their version). Two of two persons had the same issue on their desktops - I've asked them to share their screen to see. – Haradzieniec Dec 05 '14 at 13:55

2 Answers2

1

You can work around the issue by using non-breaking spaces, as in 

<li><a class="buggy" href="https://www.example.com/">A&nbsp;ABC&nbsp;DEFGHIJ</a></li>
mjfgates
  • 3,351
  • 1
  • 18
  • 15
  • 3
    While that may work, it's going to be a tedious and long-winded work around for a whole site/page. :-/ – Martin Dec 05 '14 at 13:55
1

Use the normalize.css to standardize the CSS, the difference is that different browsers have slightly different "defaults" for CSS layout,

Please see https://stackoverflow.com/a/8357635/3536236

The cause of your specific problem sounds like the browsers are taking a different approach to rounding the font size based on your zoom, font size, and font-weight.

Community
  • 1
  • 1
Martin
  • 22,212
  • 11
  • 70
  • 132
  • Also, I have personally found that Chrome likes to have very slightly larger paddings and margins between elements, than Firefox, so this *might* influence the issue slightly. – Martin Dec 05 '14 at 13:56
  • 1
    You don't need to pull in something like that to fix one small issue but I don't think this answers the question. – Rob Dec 05 '14 at 14:36