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

【问题标题】：Different css position top between the browsers浏览器之间的不同css位置顶部
【发布时间】：2016-06-19 01:34:34
【问题描述】：

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

似乎 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/

感谢您的帮助

【问题讨论】：

请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。
好的，我在描述中添加图片
好的...需要一个 Minimal 演示。那里的代码太多了。
您是否使用相同的设备进行检查？页面上的相同缩放？
@Paulie_D 演示是什么意思？什么还不清楚？

标签： html css twitter-bootstrap navbar

【解决方案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; }

Here 是一个工作演示。

【讨论】：