为什么这个小页面在Chrome和Firefox中看起来不同，这是一个错误吗？
[英]Why this small page look different in Chrome and Firefox, is this a bug?
问题描述
Below is a small html page that looks different in Chrome vs Firefox browsers. 
下面是一个小的html页面，在Chrome和Firefox浏览器中看起来不同。 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 )? 任何人都可以解释为什么它在Chrome中看起来不同如果在本地创建一个HTML文档并通过Chrome打开此文档（ jsfiddle通常在Chrome中显示它，这就是为什么我也没有创建jsfiddle页面 ）？
<!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. 令我更惊讶的是，如果你将字体大小从12px更改为11px或13px for class="buggy" ，Chrome会将其显示为两行，而不是一行 - 通常。
Also, if you remove one or another one of any css properties on the page, it is displayed in one line as well. 此外，如果您删除页面上任何一个css属性中的一个或另一个，它也会显示在一行中。 That's unclear for me why is this happening? 我不清楚为什么会发生这种情况？ Is this a bug? 这是一个错误吗？
Any ideas how to fix it without removing css properties? 任何想法如何修复它而不删除css属性？
And of course the code above is just less than 1% of a huge html page that causes this issue. 当然，上面的代码只是导致此问题的巨大html页面的不到1％。
Thank you. 谢谢。
2 个解决方案
解决方案1
1 已采纳 2014-12-05 13:54:11
您可以通过使用非中断空格来解决此问题，如
<li><a class="buggy" href="https://www.example.com/">A ABC DEFGHIJ</a></li>
解决方案2
1 2014-12-05 13:54:21
Use the normalize.css to standardize the CSS, the difference is that different browsers have slightly different "defaults" for CSS layout, 使用normalize.css来标准化CSS，区别在于不同的浏览器对CSS布局的“默认值”略有不同，
Please see https://stackoverflow.com/a/8357635/3536236 请参阅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. 您的特定问题的原因听起来像浏览器采取不同的方法来根据您的缩放，字体大小和字体粗细舍入字体大小。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.