Ich habe ein Problem mit CSS, das nur in FireFox sichtbar ist (curr.ver. 31).
Ich versuche ein reaktionsfähiges Layout mit einer Reihe von Bildern (mit Links) zu erstellen, die zentriert sind und die gleiche Höhe und den gleichen Maßstab wie die Breite des Darstellungsbereichs haben. Mein Ansatz besteht darin, einen Container mit einem festen Seitenverhältnis zu erstellen und die Bilder darin zu platzieren (jedes Bild in einem separaten <a> -Tag), zu zentrieren und ihre Höhe auf die Containerhöhe zu skalieren. Es funktioniert großartig, außer in FireFox.
Um dies zu erreichen, habe ich einen display: inline-block; height: 100% auf <a> -Tag und height: 100%; width: auto auf <img> -Tags angewendet. Aus irgendeinem (unbekannten) Grund berechnet FF die Breite des <a> -Tags nicht korrekt (wenn es oben <img> -Tag enthält) und kollabiert horizontal. Das Ergebnis ist, dass alle <a> mit der Breite 0 sehr nahe beieinander liegen (nur durch Leerzeichen getrennt) und die Bilder sich überlappen. Ich bekomme das gleiche Ergebnis mit display: block; float: left; auf <a> Tags.
Das CSS
%Vor%Der HTML-Code
%Vor%Es ist fast zwei Jahre her, seit diese Frage gestellt wurde, und Firefox zeigt immer noch dieses Verhalten. Also, für alle in der gleichen Situation, hier ist eine Lösung (nur getestet auf Chrome 49.0 und Firefox 45.0.1).
Bearbeiten:
Ursprünglich verwendete ich Inline-Wrapper-Divs und zwei Instanzen der Bilder, von denen eines nicht angezeigt wurde und nur als Dummy diente. Es scheint, dass dies nicht notwendig ist, wie man sehen kann hier .
Alles in allem scheint es so zu sein, dass Sie in Firefox den Inline-Block nicht verwenden können, aber Sie müssen nur die Anker und Bilder als Inline-Elemente belassen, um das zu erhalten, was Sie wollen. Solange das übergeordnete Element des Ankers ein anderes Element auf Blockebene als Inline-Block ist und seine Höhe angegeben ist, erhalten Sie das gewünschte Ergebnis.
Wenn aus irgendeinem Grund Inline-Block wirklich benötigt wird, sehe ich nicht, wie man dieses Problem umgehen kann.
Hinweis:
Achten Sie auf die Schriftgröße " font-size: 0; " in der Klasse .block, mit der Leerzeichen zwischen den Bildern entfernt werden. Ohne dies werden Bilder durch Leerzeichen getrennt, die sich wie Links verhalten. Wenn die Bilder etwas Abstand zwischen ihnen benötigen, wäre das Hinzufügen eines rechten oder linken Randes wie in der Geige eine Lösung.
Auch wenn der Name der .block-Klasse nicht mehr angemessen ist, habe ich ihn gelassen, um mit dem OP zu konsistent zu bleiben.
Das geänderte CSS
%Vor%Tags und Links html css firefox width aspect-ratio