Разница в CSS-позиционировании в Windows и Linux - PullRequest
2 голосов
/ 13 апреля 2010

У меня проблема с отображением моей HTML-страницы в одних и тех же браузерах в разных ОС. Существует 3 пролета, и положение каждого пролета корректируется с помощью css (позиция: относительная). Но я обнаружил, что страница, которая выглядит корректно в Firefox под Linux, показывает не то же самое в Firefox (3.5.7) под ОС Windows.

Linux (слева - как должно быть) / Windows (справа): текст ссылки

И то же самое с другими браузерами. В чем причина этой проблемы и как ее можно решить. Мой код: question.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Question</title>
        <link href="css/question.css" rel="stylesheet" media="all" />
    </head>
    <body>
        <div class="eventFullDate">
            <span class="eventYear">2010</span>
            <span class="eventDate">17</span>
            <span class="eventMonth">FEB</span>
        </div>
    </body>
</html>

question.css:

html, body{
    font-family: Georgia;
}
div.eventFullDate{
    height: 39px;
    width: 31px;
    float: left;
    border: 1px solid;
    border-color: #E3E3E3;
    background-color: #F7FFFF;
}

span.eventYear, span.eventDate, span.eventMonth{
    color: #EC5C1D;
    position: relative;
    width: 100%;
}

span.eventYear{
    left: 1px;
    bottom: 3px;
    font-size: 0.8em;
}

span.eventDate{
    left: 5px;
    bottom: 12px;
    font-size: 1.3em;
}

span.eventMonth{
    left: 3px;
    bottom: 15px;
    font-size: 0.8em;
}

Ответы [ 2 ]

2 голосов
/ 13 апреля 2010

Похоже, версия для Linux не отображает Грузию. Согласно источникам, указанным ниже, если дистрибутив не имеет MSFONTS, CSS будет использовать стандартный шрифт с засечками.

Утопия = Грузия (с засечками)

http://andrew.triumf.ca/fonts/fonts.html
http://mondaybynoon.com/2007/04/02/linux-font-equivalents-to-popular-web-typefaces/

Есть еще одно соображение. В Грузии есть старое соглашение строчных букв. Базовая линия цифр будет сильно отличаться. Например, визуальная базовая линия для 6 против 9 будет очень отличаться. Вы можете использовать свой CSS для позиционирования одной цифры, а другая будет перекрываться.

Мой совет - выбрать другой шрифт для больших цифр или изменить дизайн, чтобы он был менее тесно связан. Грузии очень трудно, если не невозможно, вертикально центрироваться.

2 голосов
/ 13 апреля 2010

Вам следует использовать CSS-сброс, это поможет стандартизировать ваш CSS для лучшей совместимости с различными браузерами: http://developer.yahoo.com/yui/reset/

Кроме того, у вас есть это

html, body{
 font-family: Georgia;
}

Полагаю, в одной из ваших ОС нет шрифта Georgia. Вероятно, Windows.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...