Веб-сайт неправильно отображается только на одном компьютере

Question

Веб-сайт неправильно отображается только на одном компьютере

0

Поэтому я размещаю сайт rangaire.herokuapp.com, и он отображается правильно на каждом компьютере, на котором я тестировал его, кроме одного. Разрешение экрана составляет 1920 x 1080. Это делает div: после того, как атрибут нарушает вышеуказанный текст. Я очистил кеш и историю, просто не знаю, что еще делать. Есть идеи?

Браузер Win7 IE11

это css.

.mfg {
    margin-top:19px;
    height: 4px;
    padding: 0;
    border: none;
    border-top: 6px solid #1D2148;
    color: #1D2148;
    text-align: center;

}
.mfg::after {
    content: "MFG";
    display: inline-block;
    position: relative; 
    top: -0.7em;  
    font-size: 2.2em;
    padding: 0 0.14em 0 .2em;
    background: white;
    color: #1D2148;
    letter-spacing: 2px;
    margin-right: .1em;
    font-weight: 100;
}

Seal 17 фев. 2014, в 23:47

Источник

0

Технически буквы MFG являются фактическим содержанием и поэтому не должны использоваться в псевдоэлементе. В любом случае нам нужно увидеть HTML.CSS в JSfiddle. На данный момент у нас недостаточно информации, хотя мне не нравятся отрицательные поля и позиция, которую я вижу.
Paulie_D 17 фев. 2014, в 22:20
0

Название напоминает мне шутку с доктором и сломанным пальцем. Разве компьютер не сломан?
Tibo 17 фев. 2014, в 22:27
0

Всегда нужно спрашивать, включен ли режим совместимости. Кроме того, убедитесь, что для ie заданы те же версии браузера / движка рендеринга, что и для других.
Ben 17 фев. 2014, в 22:48

Показать ещё 1 комментарий

Теги:

html

css

html5

css3

1 ответ

Ещё вопросы

Технически буквы MFG являются фактическим содержанием и поэтому не должны использоваться в псевдоэлементе. В любом случае нам нужно увидеть HTML.CSS в JSfiddle. На данный момент у нас недостаточно информации, хотя мне не нравятся отрицательные поля и позиция, которую я вижу.
Название напоминает мне шутку с доктором и сломанным пальцем. Разве компьютер не сломан?
Всегда нужно спрашивать, включен ли режим совместимости. Кроме того, убедитесь, что для ie заданы те же версии браузера / движка рендеринга, что и для других.

Mr Lister · Accepted Answer · 2014-02-18T07-20-00.000Z

Это вызвано тем, что конкретный браузер имеет больший размер текста. Check View → Размер текста, чтобы убедиться.

Проблема в том, что некоторые измерения выполняются в em а другие - в px. Это приведет к несоответствиям, когда размер шрифта пользователя по умолчанию не соответствует 16px.

Дива с классом mfg имеет

margin-top: 19px;

и его ::after псевдоэлемента

top: -0.7em;
font-size: 2.2em;

это означает, что с размером корневого шрифта 16px верхняя часть текста будет в относительном положении 19 - 0.7 * 2.2 * 16 = около 6 пикселей. Но если вы сделаете размер базового шрифта на 25% больше или 20 пикселей, относительное положение станет 19 - 0.7 * 2.2 * 20 = около 12 пикселей, вдвое больше расстояния.

Решение. Не предполагайте, что 100% означает 16px. Там, где вы используете em для единицы длины, убедитесь, что знаете, что такое размер шрифта. (То есть, установите размер шрифта html в размере в пикселях.) Или используйте em для всего, что есть в CSS, вместо px.

Это отличное объяснение. Я собираюсь реализовать это. Я обычно использую px, но «тестировал» их, чтобы увидеть, что мне понравилось больше.