CSS - Firefox дает совершенно иную интерпретацию Chrome / Safari

Question

Привет, я действительно в растерянности, почему Firefox отображает мою страницу так неправильно

Ссылка на проблемную страницу (еще не запущена)

В Chrome и Safari все работает как надо.Плюс, HTML проверяет, нет ошибок jquery.Обычно FF не так уж далеко.Однако, да, создание фреймворка довольно сложное.Я вкладываю много div и использую отображение

: table

и

display: table-cell

свойства.Размеры изображений также основаны на родителях.По сути, это макет, ориентированный на сверхтекучесть, с дополнительным бонусом к тому, что размер изображения тоже плавный (я пробую что-то новое здесь, так что, возможно, это мне подходит)

Я предполагаю и надеюсь, что, возможно, естьтолько одна глупость, которую Firefox не интерпретирует одинаково.Надеясь, что кто-то может пролить свет на меня.Высоко ценится

Answer 1

Я немного поэкспериментировал с вашим кодом, и похоже, что Firefox не поддерживает position: relative в сочетании с display: table-cell или display: table.Следовательно, ваш контекст позиционирования не восстанавливался, и абсолютно позиционированные изображения масштабировались относительно ширины окна, а не ширины их контейнера.Я изменил это ...

<div class="imgContainer">
    <div class="thumbnail"><img width="100%" height="auto" alt="image" src="images/2.png"></div>
    <!-- Snip -->
</div>

... на это ...

<div class="imgContainer">
    <div style="position: relative;">
        <div class="thumbnail"><img width="100%" height="auto" alt="image" src="images/2.png"></div>
        <!-- Snip -->
    </div>
</div>

... и оно стало больше похоже на версию Chrome.По сути, вам нужен промежуточный div с position: relative между ячейкой таблицы и вашими абсолютно позиционированными миниатюрами, чтобы сбросить контекст позиционирования.Это причина гигантских изображений, по крайней мере.

РЕДАКТИРОВАТЬ:

Здесь я исправил это для вас .Обязательно удалите тег в заголовке, если вы используете этот исходный файл.

Answer 2

Вы используете CSS по идеологическим причинам. Любой разумный человек будет использовать стол.

Answer 3

Ну ... .tableMaker > .imgContainer > .thumbnail, имеющий ширину 100%, отчасти виноват, как мне кажется.Переключите их на заданное значение, а не в процентах.(этот стиль в HTML, а не CSS, FYI)

Answer 4

По какой-то причине firefox подавляет 100% -ное значение для ваших изображений, как здесь: <img width="100%" Если вы явно установите это значение, оно, похоже, будет работать.

Answer 5

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

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