行高在瀏覽器上的顯示方式不同

我有一個標題部分和一個後續的導航部分，導航部分顯示的是我在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;}在所有代碼解決之前。 –

行高在瀏覽器上的顯示方式不同

回答

相關問題