Different css position top between the browsers - html

Question

I have some trouble with the positioning of my mobile menu.
It seems that chrome has a small shift from 1px then in the other browser and Ι don't know why. Αs well Firefox looks in a specific width range good, but not overall. Ι use bootstrap and bootstrap use noramlize.css to reset the elements.
Ι prepared it on jsfiddle and tried to figure out what the problem is but was not able to.
Ηere you can better see what Ι mean:
Ι use the normal navbar from bootsrap:
HTML
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="hamburger-icon"></span>
</button>
<div style="" aria-expanded="true" class="navbar-collapse collapse in" id="top-nav">
<ul class="nav navbar-nav nav-top">
<li>
<a class="dropdown-btn small" type="button" href="reseller.php">
<span class="icon reseller-icon"></span><span class="text">Reseller</span>
</a>
</li>
<li>
<a class="dropdown-btn small" type="button" href="first_step.php">
<span class="icon wizard-icon"></span><span class="text">Data capturing</span>
</a>
</li>
<li>
<a class="dropdown-btn small" type="button" href="settings.php">
<span class="icon settings-icon"></span><span class="text">Settings</span>
</a>
</li>
<li>
<a class="dropdown-btn small" type="button" href="archive.php">
<span class="icon archive-icon"></span><span class="text">Archive</span>
</a>
</li>
<li>
<a class="modalbox dropdown-btn small" href="#modalbox-language-country">
<span class="icon search-icon"></span><span class="text">Language / Country</span>
</a>
</li>
<li class="visible-xs">
<a class="dropdown-btn small" href="#">
<span class="icon"></span><span class="text">Logout</span>
</a>
</li>
</ul>
</div>
</div>
Due the css is not that small, it may be better to see it directly on jsfiddle.
Here is my code: https://jsfiddle.net/nm7b8jw2/5/
Thanks for any help

Answer 1

The issue occurs because Firefox renders the .navbar-header element with a height of 31px where as in Chrome the element is rendered with a height of 30px.
Such issues usually are handled by tweaking the line-height property of the elements. With two changes in the CSS it can be aligned in all browsers.
One is:
#media screen and (max-width: 991px) {
body {
font-size: 13.5px;
line-height: 20px; } } /* Line 17: previous value was 19px */
The second is:
header .nav-top-wrapper .navbar-header .navbar-toggle {
margin: 0;
padding: 4px 0 4px 10px; /* Line 279: previous value was 5px 0 4px 10px */
font-size: 19px; }
Here is a working demo.