css - 行高在浏览器上的表示方式有所不同

我有一个标头部分和一个后续的nav部分，并且nav部分在高度上显示了我在（MacBook Pro Retina）上正在开发的内容的高度，但是当我尝试在Windows机器（均为chrome）上查看站点时，外观明显height完全不同，我尝试将line height属性删除，但没有帮助：




CSS：

.nav {
    text-decoration: none;
    text-shadow:
             0px 14px 10px rgba(0,0,0,0.15),
             0px 10px 4px rgba(0,0,0,0.1),
             0px 34px 30px rgba(0,0,0,0.1);
}

.nav li {
    text-transform: lowercase;
    font-size: 40px;
    display: inline-block;
}

.nav a { color: rgba(255,255,255,.55); transition: .3s ease; -webkit-transition: .3s ease;} .nav a:hover { color: white; text-decoration: none; text-shadow: 0px 3px 0px #b2a98f,
             0px 14px 10px rgba(0,0,0,0.15),
             0px 10px 4px rgba(0,0,0,0.1),
             0px 34px 30px rgba(0,0,0,0.1);
}
.nav-white { color: white !important; text-shadow: 0px 3px 0px #b2a98f,
             0px 14px 10px rgba(0,0,0,0.15),
             0px 10px 4px rgba(0,0,0,0.1),
             0px 34px 30px rgba(0,0,0,0.1);
         /*text-shadow: 0px 0px 6px rgba(255,255,255,0.7);*/
}

.header-text {
    display: table;
    margin: 0 auto;
    padding-top: 150px;
    text-align: center;
/*  border-bottom: 5px solid white; underline that header!*/
    padding-bottom: 10px;
    text-shadow: 0px 3px 0px #b2a98f,
             0px 14px 10px rgba(0,0,0,0.15),
             0px 18px 4px rgba(0,0,0,0.1),
             0px 34px 30px rgba(0,0,0,0.1);
}


.header-img {
    width: 100%;
    height: 420px;
    background-color: #FE5B35;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    position: relative;
    -moz-box-shadow: inset 0 0px 10px rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 0px 10px rgba(0,0,0,.2);
    box-shadow: inset 0 0px 10px rgba(0,0,0,.2);
}

我不确定这是否与Mac的像素密度有关，但是过去在开发时我没有遇到过这样的问题；过去的情况相当不错。
编辑：
here类似的帖子说这与文本阴影有关，并且可以通过更改字体来解决，我不希望更改字体。有没有解决的办法？

HTML：

<span class='header-text'>EVERYTHING ROB</span>
                    <div class='nav'>
                        <ul>
                            <li><a href='portfolio/' class='portfolio-nav'>Portfolio</a></li>
                            <li><a href="code-snippets" class='code-snippets-nav'>Code Snippets</a></li>
                            <li><a href="contact-me" class='contact-me-nav'>Contact</a></li>
                        </ul>
                    </div>

最佳答案

您是否尝试过使用CSS重置。这样可以确保浏览器的大小和间距始终相同。
查看更多：About CSS Reset

将其放在所有CSS代码之前：

* {
   margin:0;
   padding:0;
   border: 0;
   list-style:none;
   vertical-align:baseline;
   line-height: 1;
}