Разница между браузерами

Question

У меня есть один вопрос. Я хочу знать, как решить следующий пример:

я создаю 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; 
} 

Браузеров разные:

Проблема в весе шрифта и заполнении. Есть ли какое-нибудь решение?

Answer 1

В разных браузерах/системах есть другой механизм рендеринга, поэтому вывод, выданный ими, будет отличаться. И никто, серьезно относящийся к webdev, не собирается жаловаться на это. Это именно так, как это - сделка с ним :)

Answer 2

Я бы явно установить две вещи с помощью 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 

Answer 3

Вы можете использовать нормализуется. css-файл, чтобы браузеры отображали все как можно более похожее.

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

Answer 4

я думаю, что проблема заключается в разрешении экрана 1000px в типичном дисплее будет N santimeters, но в больших дисплеев разрешения, было бы N - х, где х разница разрешения экрана, поэтому ваша маржа-верх: 40px проявляется по-разному, попробуйте использовать margin-top: 5%