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

Question

我有一个标题部分和一个后续的导航部分，并且导航部分在我正在开发的内容(MacBook Pro Retina)上的高度方面显示良好但是当我尝试在 Windows 机器上查看该站点时(均在 chrome 中)明显的行高完全不同，我试着去掉行高属性，但没有用:

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>

Answer 1

您是否尝试过使用 CSS 重置。这确保了大小和间距始终与浏览器无关。查看更多:About CSS Reset

将它放在所有 CSS 代码之前:

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