Code

Bugs CSS et incohérences dans Firefox 3.x

Il n'y a pas beaucoup d'articles couvrant les incompatibilités, ou les différences CSS dans Firefox seul - et pour une bonne raison.

Firefox a toujours fait un excellent travail en supportant à la fois CSS et JavaScript de manière conforme aux normes sans trop de bugs complexes.

Il existe toutefois quelques propriétés et sélecteurs CSS qui ne sont pas pris en charge par une ou plusieurs des versions publiées depuis la version 3.0.

Cet article traitera des bogues, des incohérences et de l'absence de support . Donc, si vous rencontrez des problèmes avec une propriété CSS ou un sélecteur dans Firefox et que celui-ci ne figure pas dans la liste, vous devrez probablement repenser votre mise en page et reconsidérer la nature du problème.

Depuis que Firefox 2 est virtuellement inexistant , Je ne considérerai pas cette version spécifiquement, mais cette information s'appliquera généralement à cette version par défaut.

Et je dois noter que le matériel pour ce poste a été pris principalement de la nouvellement mis à jour SitePoint Référence CSS , la référence CSS la plus complète et la plus complète disponible partout.

Le bogue de débordement de contour

Dans Firefox 3.x, lorsqu'un élément déborde de la bordure d'un parent outline ensemble de propriétés, le contour s’étend pour s’adapter à l’élément contenant, comme indiqué dans la capture d’écran ci-dessous:

L'implémentation correcte est affichée dans la capture d'écran suivante de Chrome:

Comme indiqué ci-dessus, le contour doit englober l’élément qui est décrit et ne doit pas être affecté par des éléments débordants. Pour vous assurer qu'il n'y a pas de confusion, notez qu'il s'agit d'un bogue dans l'implémentation du outline propriété, pas le border propriété.

Référence: Référence CSS SitePoint: Propriété outline

    Tables avec bordures effondrées

    Dans Firefox, lorsqu'une table a ses frontières définies sur collapse en utilisant le border-collapse property, les marges supérieure et gauche de la table par rapport aux éléments proches sont à 1 pixel. Ceci est montré dans une capture d'écran zoomée dans l'image ci-dessous, qui affiche la bordure inférieure d'un élément de niveau bloc (rouge) touchant la bordure supérieure d'une table réduite (bleu):

    Voici l'implémentation correcte de cette paire propriété / valeur, comme indiqué dans Chrome:

    Comme indiqué ci-dessus, les bordures étant «réduites» et la table n'étant pas un élément de bloc, il doit y avoir un léger décalage dans la marge gauche et la marge supérieure doit être égale à la bordure inférieure de l'élément au-dessus.

    Référence: Référence CSS SitePoint: propriété border-collapse

      Cellules vides dans les lignes de tableau

      C'est une valeur de propriété qui n'est pas implémentée correctement par n'importe quel navigateur, y compris Firefox. Lorsqu'une ligne de table n'a pas de contenu visible et que toutes ses cellules ont leur empty-cells propriété définie sur hide , la ligne entière doit se comporter comme si elle était définie sur "display: none", sans bordure ni arrière-plan visible.

      Aucun navigateur ne gère cela correctement, de sorte que la ligne du tableau est toujours visible, comme indiqué dans l'image ci-dessous.

      Référence: Référence CSS SitePoint: Propriété empty-cells

        Espacement des mots sur des éléments en ligne

        Dans Firefox 3.x, une valeur négative sur le word-spacing propriété sera traitée comme zéro sur les éléments en ligne adjacents. La valeur négative doit entraîner le chevauchement des éléments en ligne, comme ce serait le cas avec le texte, mais cela ne se produit pas. Au lieu de cela, les éléments ne reçoivent qu'une séparation des espaces blancs sans chevauchement.

        L'image ci-dessous affiche les implémentations correctes et incorrectes:

        Dans les exemples ci-dessus, les trois mots "Fruits", "Vegetables" et "Other Foods" sont emballés individuellement éléments, tandis que le paragraphe qui les enveloppe a sa word-spacing propriété définie sur une valeur négative.

        Le deuxième exemple (Firefox) ne parvient pas à appliquer l’espacement des mots négatifs, sauf entre les deux derniers mots, car ces mots ne sont pas séparés par des segments mais sont des éléments de texte naturels.

        Comme point secondaire, ce bogue se produit de la même manière dans IE8, mais pas dans les versions précédentes d'IE.

        Référence: Référence CSS SitePoint: espacement des mots

          Décoration de texte sur des descendants flottants

          Lorsqu'un élément possède un ensemble de valeurs de décoration de texte, cette valeur ne doit pas être héritée par les descendants flottants. Dans Firefox 3.x, les descendants flottants reçoivent les mêmes valeurs de décoration de texte que leur parent, même si cela ne devrait pas être le cas.

          Dans l'image ci-dessus, la première ligne est une capture d'écran de IE8, affichant un élément a flotté à l'intérieur d'une ancre. Le texte à l'intérieur du n'a pas de décoration de texte visible, ce qui est la bonne façon de l'afficher. Dans Firefox (montré dans le deuxième exemple), le texte-décoration est incorrectement appliqué à la flottant .

          Vous avez peut-être remarqué ce bogue dans Firefox lorsque vous tentez de supprimer la décoration de texte des images flottantes à l'intérieur des ancres.

          Référence: Référence CSS SitePoint: propriété text-decoration

            Pré-ligne et pré-emballage pour la propriété d'espace blanc dans FF 3.0

            En utilisant le white-space propriété dans Firefox 3.5, vous pouvez spécifier si plusieurs caractères spatiaux doivent être réduits à un seul espace ou non. Par défaut, les documents HTML réduiront plusieurs espaces en un seul espace. Dans certains cas, vous pouvez appliquer white-space: pre pour éviter que l’espace blanc ne soit réduit, ce qui est similaire à l’utilisation du 

              Balise HTML  Par la suite, vous souhaiterez peut-être supprimer ce paramètre en utilisant white-space:  pre-line  (pour réduire l'espace blanc). 
              Firefox 3.0 ne prend pas en charge cette valeur, l'espace blanc sera donc conservé.  Firefox 3.5 réduit correctement l'espace.  L'image ci-dessous montre les deux exemples: 
              De même, lorsqu'un paragraphe de texte est défini sur white-space:  pre-wrap  , cela devrait préserver les espaces blancs entre les mots, mais devrait naturellement inclure des sauts de ligne.  Firefox 3.0 ne parvient pas à implémenter cela correctement, tandis que les versions ultérieures (et tous les autres navigateurs) incluent les sauts de ligne naturels.  Les deux exemples sont présentés ci-dessous. 
              Gardez à l'esprit que l'élément externe est donné white-space: pre  tandis qu'un intérieur   tente de remplacer le manque de sauts de ligne en utilisant pre-wrap  .  Seul, pre-wrap  n'aurait aucun effet. 
              Firefox 3.x traite également certains des white-space  valeurs différemment des autres navigateurs lorsque ces valeurs sont appliquées à la