28172 sujets

CSS et mise en forme, CSS3

[Résolu]Problème de compatibilité FireFox/Chrome

Bonjour à tous

Je suis tombé sur un problème que je ne vois pas comment régler.
J'ai mis au point sur FireFox un CSS qui me donne satisfaction.
Sur un grand écran, j'obtiens:
http://tests.osirisnet.net/migration/images/tuile1.png
et sur petit écran, cela donne:
http://tests.osirisnet.net/migration/images/tuile2.png
Ce qui me convient parfaitement.

Par contre sur Chrome j'obtiens:
http://tests.osirisnet.net/migration/images/tuile3.png
On remarque la zone blanche au dessus du titre, ce que je ne veux pas.

Voici le HTML:
<figure id="horemheb" class="tile">
    <img src="/tombes/pharaons/horemheb/photo/horemheb_tile.jpg" alt="" >
    <figcaption>
        <h3>HOREMHEB - KV 57</h3>
        <p>La tombe de ce pharaon est couverte en détails avec de nombreuses reconstitutions 3D. Son exquis relief levé a gardé toute sa fraîcheur. Le Livre des Portes y est détaillé.</p>
    </figcaption>
</figure>

En analysant le code, on trouve la chose suivante:
Le <figcaption> est décrit comme display:inline; pour que le texte vienne se mettre au dessous de l'image sur un petit écran.
Dans ces conditions, Chrome considère que le figcaption est vide, car il contient un <h3> qui est déclaré comme display:block; Il se comporte donc de la même façon que si on avait mis un <h3> à l'intérieur d'une balise <p>: il ferme la balise avant <h3>

Question: sachant que je préférerais ne pas modifier le HTML, quelles déclarations CSS utiliser pour obtenir le résultat souhaité aussi bien sur Chrome que sur FireFox?

Merci de votre aide.
Modifié par PapyJP (12 Jan 2017 - 11:07)
Administrateur
Hello,

Je ne suis pas sûr de comprendre la question, mais si j'ai bien suivi, il suffit de déclarer figcaption {display: inline-block;} pour avoir le même comportement partout, non ?

EDIT : sinon, un simple figcaption > h3 {margin-top: 0;} devrait aussi faire l'affaire.
Modifié par Raphael (12 Jan 2017 - 11:27)
Raphael a écrit :
Hello,

Je ne suis pas sûr de comprendre la question, mais si j'ai bien suivi, il suffit de déclarer figcaption {display: inline-block;} pour avoir le même comportement partout, non ?

Oui, mais ce comportement consiste à mettre le tout au dessous de l'image, ce qui n'est pas ce que je veux

[quote=RaphaelEDIT : sinon, un simple figcaption &gt; h3 {margin-top: 0;} devrait aussi faire l'affaire.
Non, ça ne change rien.
Je vous donne le lien sur la page, il y a plusieurs pages de CSS, en cascade comme leur nom l'indique, et il y a peut être un effet de bord que je ne vois pas:
http://tests.osirisnet.net/genIndex.php?lang=fr&page=/tombes/pharaons/pharaons1.html

EDIT: j'ai au moins trouvé un problème dans les feuilles de style en cascade. Je considère le problème comme résolu.
Désolé de vous avoir perturbés pour si peu
Modifié par PapyJP (12 Jan 2017 - 18:47)
Sujet clos
Aller à