Кросс-браузерный дисплей - PullRequest
Новая
       7

Кросс-браузерный дисплей

3 голосов
/ 14 февраля 2010

Я тестирую веб-сайт в Chrome, Firefox и Internet Explorer, используя следующее в файле CSS. 

#foot_links1, #foot_links2, #foot_links3 {
    position: absolute;
    margin-top: 55px;
    margin-top: 14em;
    color: #02102f;
    font-family: Arial;
}

#foot_links1 {
    left: 335px;
}

#foot_links2 {
    left: 630px;
}

#foot_links3 {
    left: 830px;
}

foot_links1, foot_links2 и foot_links3 все находятся на одной прямой линии, но расположение foot_links1, foot_links2, foot_links3 зависит от браузера.

Как я могу это исправить?

Ответы [ 5 ]

5 голосов
/ 14 февраля 2010

Я предлагаю использовать сбросить таблицу стилей .

Сброс таблицы стилей уменьшит несоответствия браузера, такие как высота строк по умолчанию, поля и размеры шрифтов заголовков.

Вы также можете проверить следующие статьи для дальнейшего чтения:

1 голос
/ 14 февраля 2010

Убедитесь, что у вас есть: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Это изменит модель бокса поведения Internet Explorer в Internet Explorer 7 или более ранней версии

Убедитесь, что первое правило всего: 

body *{
    padding:0;
    margin:0;
}

(Может быть, не стоит добавлять это после того, как вы уже написали весь CSS, вместо этого вы можете использовать более конкретный рут, нацеленный на место.)

0 голосов
/ 15 февраля 2010

Хотя все, что другие люди посоветовали, - хороший совет, в качестве прямого ответа на ваш вопрос используйте «padding-top» вместо «margin-top» и убедитесь, что у ваших div-ов установлен набор высоты. Это должно сблизить вас или совсем туда.

0 голосов
/ 14 февраля 2010

Вы не сказали, как меняется размещение. Я сделал быстрый тест с IE8 и Opera, и было некоторое различие в вертикальном размещении. Я исправил это, добавив свойство top (и удалил 2-й margin-top). Например: 

   margin-top: 1em;
   top: 55px;

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

0 голосов
/ 14 февраля 2010

Начните с того, что убедитесь, что вы используете правильный тип документа, и убедитесь, что сайт имеет значение http://validator.w3.org/

Правильный тип документа: xhtml переходный или html 4 строгий (html 4 переходный обычно заставляет IE делать разные вещи)

Что касается сброса таблиц стилей - да, они могут быть полезны, однако я стараюсь избегать их, так как вы выдвигаете больше килобайт для своих пользователей (более длительное время загрузки, особенно если в вашем веб-отеле нет zips css), а тем более вы замедляет рендеринг браузеров, потому что есть больше правил CSS, которые он должен обработать.

Наконец-то это кажется мне хакерским - я имею в виду, что вы можете сделать так, чтобы он выглядел правильно, не прибегая к сбросу всякого рода вещей, так зачем это делать?

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

Нет похожих вопросов

...