Что может вызвать эту проблему рендеринга HTML / CSS в Firefox?

Question

Стили:

h2 {
    color: #71D0FF;
    font-size: 11px;
    font-weight: bold;
    margin: 0px 0px 5px 0px;
}
a.box {
    color: #FFFFFF !important;
    cursor: pointer;
    display: block;
    padding: 10px;
    text-align: justify;
}
a.box:hover {
    background-color: #0C0C0C;
}
a.box span.down {
    display: block;
    color: #D04242;
    float: right;
    font-size: 11px;
    margin-left: 5px;
}
a.box span.up {
    display: block;
    color: #71D013;
    float: right;
    font-size: 11px;
}
span.noob {
    color: #FFA142;
}
span.pro {
    color: #A142A1;
}

HTML (это в основном повторяется для каждой ссылки):

<a href="/library/blaze" class="box">
<span class="down">-0</span>
<span class="up">+0</span>
<h2><span class="noob">NOOB</span> BLAZE</h2>
HAS CREATED 0 MAPS, WON 0 BATTLES, AND LOST 0 MAPS
</a>

Что я не понимаю, так это то, почему он иногда по-разному отображает в Firefox,Иногда он появляется так, как должен, а иногда - в таком странном формате, как показано здесь:

У меня никогда не было ничего подобного раньше, кто-нибудь знаетчто вызывает это?Это даже делает это для кого-то еще?Как я уже говорил ранее, иногда он загружается просто отлично (точно такой же HTML, CSS и все остальное), а иногда нет.Это кажется случайным.Он отлично загружается в IE без каких-либо странных проблем.

Answer 1

Интересно. Я точно могу воспроизвести его на FF3.6, на самом деле я получаю испорченную версию чаще.

Я не могу сейчас обойти это, но, глядя на это в Firefox, что-то не так с этой ссылкой. Если вы откроете «проверить элемент» в Firebug, вы заметите, что отображаемый DOM определенно меняется между неповрежденным и поврежденным представлением. Firebug также добавит _moz-rs-heading к ссылке, что вроде как объяснено здесь .

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

Answer 2

Я немного удивлен, что он не действует больше, чем делает.

Вы поместили блочный элемент (h2) внутри встроенного элемента (a).Разметка сломана, и разные браузеры будут делать разные вещи, чтобы извлечь из нее выгоду.Единственное, что может произойти, это то, что браузер добавляет конечный тег для ссылки перед элементом блока.

Мы используем встроенный тег вместо тега h2 и используем CSS для стилизации, чтобы вы выглядели так, как выхочу.

Answer 3

У меня та же проблема.

http://www.jameshughbanks.com/

Я сузил это до этого. Это ТОЛЬКО происходит, когда я помещаю ссылку вокруг нескольких элементов (в моем случае это включает в себя один (или более) блочный элемент (ы) и один (или более) встроенный элемент).

Это очень странно, так как, похоже, влияет только на "каждую другую" "ошибку", которую вы создаете, используя метод, который я описал выше. Это изменит первый и третий выход Div, но не 2-й. (поначалу это касалось только 2-го, но я частично исправил проблему (раньше он также портил H2, но размещение ссылки вокруг h2 только убирало их из-за ошибки.

Таким образом, все сводится к тому, что можно разместить только ссылку на 1 элемент блока, я не проверял ошибку с более чем 1 элементом блока, только несоответствие элемента блока и нескольких встроенных элементов.

Если у кого-нибудь есть обходные пути для этой проблемы в Firefox, пожалуйста, дайте мне знать. Похоже, что это не происходит в IE, Opera или Chrome.

Также для тех, кто думает, что это плохая разметка, она включена, чтобы быть действительной в следующей редакции html5, и это единственный способ (без javascript / etc) делать эти типы ссылок. Firefox, очевидно, закодирован, чтобы правильно показывать эту разметку, но по какой-то причине имеет некоторый тип ошибок, из-за которых он иногда отображается по-разному по неизвестным причинам. Независимо от того, нужно ли это исправить или разработать обходной путь, я мог бы сделать каждый элемент отдельным блоком и, возможно, исправить его, но это много лишнего ненужного кода.

Answer 4

Когда я нажал на ваш сайт, у меня возникла проблема в FF3.6. При использовании Firebug для просмотра HTML-кода проблема заключалась в том, что неправильно отображаемые строки имеют дополнительный <a>, заключенный в текст внутри <span>. Может быть, какой-нибудь HTML включен в вашу БД, где он должен быть только текстовым?

Answer 5

Для меня иногда Firefox неправильно загружает CSS, обычно это все, а не частично, как это происходит с вами Для меня это правильно загружается. Вы недавно изменили это случайно и не позволили правильно обновить?

Answer 6

У меня отлично работает в Safari, Chrome и Firefox 3.5.

Я неоднократно пытался обновить. Не повезло в дублировании вашей проблемы. Вы пытались очистить кеш?

Проверка элемента в Safari или Web Developer (плагин FF) также не обнаруживает ничего необычного.

Всегда ли N00B BLAZE портит всякий раз, когда вы видите проблему, или это случайно?