瀏覽器之間的區別

-1

我有一個問題。我想知道如何解決下面的例子：瀏覽器之間的區別

我創建的HTML頁面「分區」標籤，並在瀏覽器中看起來不同...

CSS代碼：

*{ 
    margin:0; 
    padding:0; 
    -webkit-font-smoothing:antialiased; 
    -moz-osx-font-smoothing:grayscale; 
} 

@font-face{ 
    font-family:myFont; 
    src:url('PTN57F.ttf'); 
} 

body{ 
    background:#f5f5f5; 
} 

.content{ 
    width:200px; 
    height:30px; 
    background:#EEE; 
    border:1px solid #CCC; 
    margin:auto; 
    margin-top:40px; 
    font-size:16px; 
    font-family:myFont; 
    text-align:center; 
}

瀏覽器不同：

enter image description here

問題在於字體重量和填充。有沒有解決方案？

來源

2014-01-25 Daniel Jaušovec

嘗試CSS重置。 – j08691

@ j08691我試過這個，並不是更好的... –

不同的瀏覽器/系統有不同的渲染引擎，因此它們渲染的輸出會不同。沒有人認真對待webdev會抱怨它。這只是事情是這樣的 - 處理呢:)

來源

2014-01-25 21:46:19 LorDex

我會明確地通過CSS設置兩個東西，它應該給你一個更密切的跨瀏覽器的體驗：

font-weight: 300 //<-- this can be 100, 200, 300...900 
line-height: 1.5em // <-- this is em or px and should be roughly 1.5x your font size

來源

2014-01-25 21:52:22 pathfinder

我添加了這段代碼，沒有任何改變... –

那麼它可能是你需要住的東西。在大多數情況下，OSX只會渲染比Windows更好的字體。另外，它可能只是您電腦的屏幕分辨率。你的OSX是否有視網膜顯示，你的電腦只有蹩腳的分辨率？你也可以嘗試'-webkit-text-stroke：.5px' ...它會以粗體顯示文本，但是你需要弄清windows vs osx纔能有時只加載它。 – pathfinder

什麼是「填充頂」？有沒有解決方案？ –

您可以使用規範化。 CSS文件使瀏覽器顯示所有儘可能相似的內容。

http://necolas.github.io/normalize.css/

來源

2014-01-25 22:09:43 Longblog

我試過這個，並不是更好。 –

我認爲問題是在屏幕分辨率，1000像素在典型的顯示將是Ñ santimeters，但在高分辨率顯示器，這將是N - X，其中x是屏幕分辨率差，這就是爲什麼你的保證金頂：40px呈現不同，嘗試使用保證金頂：5％

來源

2014-03-24 11:06:17

瀏覽器之間的區別

回答

相關問題