как обойти это несоответствие между IE, Firefox и Chrome - PullRequest
3 голосов
/ 16 июля 2011

У меня есть фоновое изображение на веб-странице, и я размещаю изображение в своем теле, чтобы выровнять по изображению:

вот мой css:

Справочная информация:

body {
 font: 12px tahoma, Arial, Helvetica, sans-serif;
 line-height: 1.5em;
 margin: 0px;
 padding: 0px;
 color: #241a10;
 background:#c9e4ec url(/Content/images/myImage.gif);
}

Изображение:

#leftSideContainer {
    position:relative;
    margin-top:-47px;
    width:147px;
    height:93px;
    background:url(/Content/Images/image2.gif);
}

В IE7 и Chrome он выглядит идеально и выстраивается точно:
enter image description here

Но в IE8 и Firefox изображение немного ниже по сравнению с фоновым изображением: enter image description here

Если бы это была просто старая версия IE, которая была взломана, мне было бы все равно, но в этом случае и Firefox был сломан.

я пытался играть с:

 margin-top: -47px;

но если я переместу его выше, чтобы он выстроился в очередь в Firefox, он, очевидно, будет смещен для других браузеров.

любые предложения о том, что может быть причиной этого расхождения .?

1 Ответ

2 голосов
/ 16 июля 2011

CSS reset - это ваш друг

http://meyerweb.com/eric/tools/css/reset/

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

...