Question

我的手机菜单定位有些麻烦。

在其他浏览器中，Chrome似乎从1px开始有一个很小的转变，而且不知道为什么。好的Firefox看起来在特定的宽度范围内很好，但不是整体。 Ι使用bootstrap和bootstrap使用noramlize.css重置元素。

prepared在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 。< / p>

这些问题通常通过调整元素的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位置不同

1 个答案: