Html 不同浏览器之间的css位置不同

我的手机菜单定位有点问题

chrome似乎比其他浏览器的1px稍有变化，我不知道为什么。Αs well Firefox在特定的宽度范围内看起来不错，但不是整体。使用bootstrap和bootstrap使用noramlize.css重置元素

我在JSFIDLE上准备了它，并试图找出问题所在，但未能解决

Η在你能更好地理解我的意思之前：

使用bootsrap中的正常

导航栏

：

HTML

切换导航

由于css没有那么小，最好直接在JSFIDLE上看到它

这是我的密码：

---

感谢所有帮助

出现此问题是因为Firefox渲染高度为31px的

.navbar头

元素，而在Chrome中，元素渲染高度为30px

这类问题通常通过调整元素的

行高

属性来处理。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; }

---

是一个有效的演示。

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

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