Why is this small page different from Chrome and Firefox, is it a bug?
Below is a small html page that looks different in Chrome vs Firefox browsers. Can someone explain why it looks different in Chrome if I create a html document locally and open that document through Chrome (the jsfiddle usually shows it in Chrome, so I didn't create a jsfiddle page either)?
<!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 else surprises me is that if you change the font size from 12px to 11px or 13px for class="buggy"
, Chrome will display it not in two lines, but in one - usually.
Also, if you remove one or the other of the css properties on the page, it also appears on the same line. It is not clear to me why this is happening? This is mistake?
Any ideas how to fix this without removing the css properties?
And of course the above code is only 1% of the huge html page that is causing this problem.
Thank.
source to share
Use normalize.css to standardize your CSS, the difference is that different browsers have slightly different "defaults" for CSS layout,
See fooobar.com/questions/15188 / ...
The reason for your particular problem is that browsers take a different approach to rounding font size based on scaling, font size, and font weight.
source to share