Взгляните на эту страницу в FireFox. Не стесняйтесь перейти к любой из шести лучших категорий продуктов, чтобы увидеть больше кода того же типа.
Если вам [не] повезет увидеть сбой, вы увидите, что по крайней мере одна коробка с продуктом увеличит его высоту до эпических пропорций.
Вот код:
<div class="product_category">
<a href="../products/dht_1500.php" style="height: 340px;">
<h3>DHT 1500</h3>
(superfluous HTML omitted here)
</a>
</div>
Вот что показывает Firebug:
<div class="product_category">
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
<h3><a _moz-rs-heading="" style="height: 340px;" href="../products/dht_1500.php">DHT 1500</a></h3>
(superfluous HTML omitted here)
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
</div>
Вы можете видеть, что FireFox определенно закрывает мои теги и снова открывает их, а также вытаскивает собственный стиль высоты CSS вместе с ним, что приводит к стремительному росту высоты каждого продукта. Также обратите внимание, что странный _moz-rs-heading = "" бит.
Я подозреваю, что моя проблема связана с использованием блочных элементов HTML внутри встроенного тега, но я решил, что решил эту проблему путем преобразования тегов в блочное форматирование в моей таблице стилей:
.product_category a {
display: block;
}
FireFox воспроизводит избранное для моих тегов. Обычно она отображает страницу так, как я хочу, но затем время от времени она взорвет одну из коробок с моими продуктами до небес и, казалось бы, наугад.
Страницы работают правильно в Internet Explorer и Safari. Я тестировал его с FireFox 3.6 на Mac, но видел ту же проблему на FireFox для ПК.