瀏覽器之間的不同CSS位置頂部

Question

我在移動菜單的位置上遇到了一些麻煩。

似乎chrome與其他瀏覽器的1px相比有很小的偏移，我不知道為什么。 很好，Firefox在特定的寬度范圍內看起來不錯，但不是整體。 我使用bootstrap，而bootstrap使用noramlize.css重置元素。

我在jsfiddle上進行了准備，並試圖找出問題所在，但未能解決。

在這里，您可以更好地理解Ι的含義：

我使用bootsrap中的普通navbar ：

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>

由於css並不是那么小，所以最好直接在jsfiddle上看到它。

這是我的代碼： https : //jsfiddle.net/nm7b8jw2/5/

謝謝你的幫助

Answer 1

發生此問題是因為Firefox渲染高度為31px的.navbar-header元素，而在Chrome中，該元素高度為30px 。

通常通過調整元素的line-height屬性來處理此類問題。 在CSS中進行了兩項更改后，可以在所有瀏覽器中將其對齊。

一種是：

  @media screen and (max-width: 991px) {
    body {
      font-size: 13.5px;
      line-height: 20px; } } /* Line 17: previous value was 19px */

第二個是：

  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; }

這是一個工作示例。