Мозилла 39.0 постоянно сдвигает любой шрифт на 1-2 пиксела вниз:
Тот же самый текст в хроме:
Даже не вооружонным взглядом видно, что текст находится на разной высоте.
Из-за чего такое смещение и как его обойти, либо как можно совсем избавиться от него, чтобы шрифт в разных браузерах не плыл, а находились на одной высоте?
Полный КСС код:
@font-face {
font-family: 'Roboto Condensed';
src: url('../fonts/FileName.eot');
src: url('../fonts/FileName.eot?#iefix') format('embedded-opentype'),
url('../fonts/FileName.woff') format('woff'),
url('../fonts/Roboto Condensed regular.ttf') format('truetype'),
url('../fonts/FileName.svg#Roboto Condensed') format('svg');
font-style: normal;
font-weight: normal;
}
@font-face {
font-family: 'Open Sans Condensed';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('../fonts/Open Sans Condensed 300.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
/*CSS RESET=============================================================================*/
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
vertical-align: baseline;
font-family: normal;
font-weight: normal;
font-style: normal;
font-size: 1em;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
/* tables still need cellspacing="0" in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a {
text-decoration: none;
color: #000;
}
/*CSS RESET=============================================================================*/
html {
height: auto;
}
body {
background-color: #eee;
text-align: center;
}
.maindiv {
width: 1384px;
height: auto;
display: inline-block;
}
.header {
width: 100%;
height: 170px;
background: url(../images/headerimage2.jpg) no-repeat #ccc;
}
.topmenu {
width: 550px;
padding: 5px 0;
display: inline-block;
background-color: #000;
margin-top: 141px;
}
.topmenu ul li {
float: left;
border-right: 1px solid #fff;
padding: 0 15px;
}
.topmenu a {
color: #eee;
font-family: 'Roboto Condensed', true type;
font-size: 14pt;
}
.sidebarleft {
width: 397px;
background-color: #383838;
}
.userfield {
background: url(../images/userunderline.png) bottom right no-repeat;
text-align: right;
color: #eee;
padding: 5px 10px;
font-family: 'Open Sans Condensed', truetype;
font-size: 12pt;
line-height: 12px;
}
.content {
}
а вот полный код ХТМЛ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Galaxy Legend Community</title>
</head>
<body>
<div class="maindiv">
<!-- HEADER -->
<div class="header">
<div class="topmenu">
<ul>
<li><a href="#">FB NEWS</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">VIDEO</a></li>
<li><a href="#">PICTURES</a></li>
<li><a href="#">FORUM</a></li>
</ul>
</div>
</div>
<!-- END HEADER -->
<!-- LEFT SIDEBAR -->
<div class="sidebarleft">
<div class="userfield">Hello, DiscoTeka!!!</div>
<div class="logo"></div>
<div class="spacetrack"></div>
<div class="searchfield"><input type="text" /></div>
<div class="sandbox"></div>
</div>
<!-- END LEFT SIDEBAR -->
<!-- CONTENT -->
<div class="content"></div>
<!-- END CONTENT -->
<!-- RIGHT SIDEBAR -->
<div class="sidebarright"></div>
<!-- END RIGHT SIDEBAR -->
<!-- FOOTER -->
<div class="footer"></div>
<!-- END FOOTER -->
</div>
</body>
</html>
Простой
