浏览器之间的不同 css 位置顶部

Question

我的移动菜单定位有些问题。

似乎 chrome 与其他浏览器中的 1px 相比有一个小的偏移，我不知道为什么。 As well Firefox 在特定的宽度范围内看起来不错，但不是整体。 Ι 使用 bootstrap 和 bootstrap 使用 noramlize.css 重置元素。

我在 jsfiddle 上准备了它并试图弄清楚问题是什么但没能弄清楚。

HI 在这里你可以更好地理解 Ι 的意思：

Ι 使用来自 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 呈现 .navbar-header 元素的高度为 31px，而在 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; }

Here 是一个工作演示。

浏览器之间的不同 css 位置顶部

Different css position top between the browsers

html

css

navbar

twitter-bootstrap