行高在浏览器上的显示方式不同

我有一个标题部分和一个后续的导航部分，导航部分显示的是我在Mac上开发的MacBook Pro Retina上的高度，但是当我尝试在窗机（无论是在镀铬）表观线高度是完全不同的，我试着走线height属性并没有帮助： Display on the Mac in Chrome 行高在浏览器上的显示方式不同

Display on 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>

来源

2014-02-08 user3105607

如果你摆弄的东西了或粘贴HTML，这将帮助我们。 – loveNoHate

请显示该网站的实况样本或Jsfiddle。 – Nit

问题中的代码呈现与屏幕截图完全不同。请提供实际上重现问题的代码，并提及可直接观察的事物，说明问题所在。（例如，线条高度不能直接观察 - 您无法看到某些垂直间距是由它引起的，还是由填充，边距或其他引起的。） –

你有没有尝试使用CSS复位。这确保了独立于浏览器的大小和间距始终相同。查看更多：About CSS Reset

之前所有的CSS代码所言：

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

来源

2014-02-08 12:40:00

添加了html :) – user3105607

CSS复位倾向于导致比他们解决的问题更多。你应该找到引起问题的* specific *属性，并将它们设置为零（或其他）。 –

我认为具体属性将解决他的问题是行高。也许：* {line-height：1;}在所有代码解决之前。 –

行高在浏览器上的显示方式不同

回答

相关问题