Ниже представлена небольшая html-страница, которая выглядит по-иному в браузерах Chrome против Firefox. Не мог бы кто-нибудь объяснить, почему в Chrome Chrome выглядит иначе, если локально создать html-документ и открыть этот документ через Chrome (jsfiddle обычно показывает его в Chrome, поэтому я также не создал страницу jsfiddle)? 
Почему эта небольшая страница отличается от Chrome и Firefox, это ошибка?
<!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>
Что делает меня еще больше удивило то, что, если изменить размер шрифта от 12px до 11px или 13px для class="buggy", Chrome отображает его не в двух строках, но в один - нормально.
Кроме того, если вы удаляете тот или иной из свойств css на странице, он отображается в одной строке. Это непонятно для меня, почему это происходит? Это ошибка?
Любые идеи, как исправить это, не удаляя свойства css?
И, конечно, приведенный выше код составляет менее 1% огромной страницы html, которая вызывает эту проблему.
спасибо.
Какая версия вы используете? Я создал локальный документ и выглядит по желанию в chrome 38, chromium 39 и firefox 34 на ubuntu –
Chrome версии 39.0.2171.71. Прежде чем спросить в SO, я попросил двух человек показать, как этот код выглядит на своих рабочих столах в Chrome (я не знаю их версию). У двух из двух человек была такая же проблема на их рабочих столах - я попросил их поделиться своим экраном, чтобы увидеть. – Haradzieniec