CSS дисплей: проблема с блоком, кто виноват в IE или Firefox

Question

Мне трудно понять, почему в IE и Firefox все выглядит так по-разному. Вот класс CSS

.logo { width: 224px; height: 120px; position: relative;
    display:block; left: -1px; background-image: url(logo.png);}

В IE это работает как положено, но в Firefox ведет себя как пьяный! Я вижу 3 logo.png в разных местах на странице. Если я уберу display: block, я не смогу увидеть изображение ни в одном браузере.

Любые комментарии приветствуются.

Answer 1

Возможно, вам понадобится добавить

background-repeat: none;

в ваш класс CSS. И для дальнейшего использования, это всегда IE, который облажается;)

РЕДАКТИРОВАТЬ: Если это не решит вашу проблему, пожалуйста, создайте образец сайта где-нибудь вживую, чтобы мы могли посмотреть его и немного поэкспериментировать. Также, Firebug может быть полезным.

EDIT2: Удалено это, поскольку я заметил разницу между firebug и src, которые я получил, щелкнув правой кнопкой мыши и выбрав «View Source ...»

РЕДАКТИРОВАТЬ3: Стив нашел вашу проблему: Вы не можете самостоятельно закрывать якоря. Изменение

<a href="/" id="logo" />

до

<a href="/" id="logo"></a>

Answer 2

Ваша проблема в HTML. Вы не можете самостоятельно закрыть теги A

Answer 3

Правильно, проблема всегда в IE. Если у firefox есть проблема, это обычно проблема со спецификациями w3c. Не быть фанатом, это просто так.

Я предполагаю, что ваша проблема в том, что значение по умолчанию для background-repeat различно в разных браузерах. Вы должны попробовать установить background-repeat: no-repeat EDIT: Возможно, нет, все браузеры по умолчанию повторяют.

Было бы полезно узнать, к какому элементу вы применяете логотип. Что бы это ни было, оно, вероятно, падает на высоту 0px, когда не является блоком. Поместите границу, чтобы увидеть, что там происходит.