行高在浏览器上的表示方式不同答案

【问题标题】：Line height being represented differently on browsers行高在浏览器上的表示方式不同
【发布时间】：2014-02-08 08:38:12
【问题描述】：

我有一个标题部分和一个随后的导航部分，并且导航部分在我正在开发的内容（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>

【问题讨论】：

如果您修改了某些内容或粘贴了 html，这将对我们有所帮助。
请展示网站的现场样本或 Jsfiddle。
问题中代码的渲染与截图完全不同。请提供实际重现问题的代码，并参考直接可观察的事物来描述问题所在。（例如，行高是不能直接观察到的——你看不出某些垂直间距是由它引起的，还是由填充、边距或其他原因引起的。）

标签： css macos google-chrome

【解决方案1】：

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

把它放在你所有的 CSS 代码之前：

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

【讨论】：

CSS 重置往往会导致比解决的问题更多的问题。您应该找到导致问题的特定属性，并将它们设置为（为零或其他值）。
我认为具体的属性将解决他的问题是行高。也许：*{line-height: 1;} 在所有代码都解决之前。