Kode

CSS fejl og inkonsekvenser i Firefox 3.x

Der er ikke mange artikler, der dækker inkompatibiliteter, eller CSS forskelle i Firefox alene - og med god grund.

Firefox har altid gjort et fremragende godt arbejde med at understøtte både CSS og JavaScript på en standard-kompatibel måde uden for mange ubehagelige fejl.

Der er dog nogle få CSS-egenskaber og selektorer, der ikke understøttes af en eller flere af de versioner, der er udgivet siden version 3.0, som jeg vil dække her.

Denne artikel vil dække fejl, inkonsekvenser og ikke-support . Så hvis du har problemer med en CSS-egenskab eller vælger i Firefox, og det ikke er angivet her, så skal du sandsynligvis genoverveje dit layout og genoverveje, hvad skyldige måtte være.

Da Firefox 2 er stort set ikke-eksisterende , Jeg vil ikke overveje denne version specifikt, men disse oplysninger vil som regel normalt gælde for den version.

Og jeg skal bemærke, at materialet til dette indlæg blev taget primært fra nyligt opdaterede SitePoint CSS reference , som er den bedste og mest omfattende CSS-reference til rådighed, hvor som helst.

Overskridelsesoverflowfejl

I Firefox 3.x, når et element overgår grænsen til en forælder, der har outline ejendomsindstillingen, vil omridset strække sig for at passe til det indeholdende element som vist i nedenstående skærmbillede:

Den korrekte implementering vises i næste skærmbillede taget fra Chrome:

Som vist ovenfor skal omridsen omfatte det element, der skitseres, og bør ikke påvirkes af overfyldte elementer. For at sikre, at der ikke er nogen forvirring, bemærk at dette er en fejl i implementeringen af outline ejendom, ikke den border ejendom.

Reference: SitePoint CSS Reference: disposition Ejendom

    Borde med sammenklappede grænser

    I Firefox, når et bord har sine grænser sat til collapse bruger border-collapse ejendom er bordets øverste og venstre margen i forhold til nærliggende elementer 1 pixel fra. Dette vises i et indsnitsbillede i billedet nedenfor, der viser nederste kant på et blokniveauelement (rødt), der rører den øverste grænse af et sammenbrudt bord (blå):

    Her er den korrekte implementering af dette property / value pair, som vist i Chrome:

    Som vist ovenfor, fordi grænserne er "sammenbrudt", og fordi bordet ikke er et blokelement, skal der være en lille forskydning i venstre margen, og topmargenen skal være lige med den nederste kant af elementet over den.

    Reference: SitePoint CSS Reference: border-collapse Ejendom

      Tomme celler i tabel rækker

      Dette er en ejendomsværdi, der ikke implementeres korrekt af enhver browser, herunder Firefox. Når en bordrække ikke har noget synligt indhold, og alle dets celler har deres empty-cells ejendom sat til hide , hele rækken skal opføre sig som om den var sat til "display: none", uden grænser eller baggrunde synlige.

      Ingen browser håndterer dette korrekt, så bordrækken er stadig synlig, som vist på billedet nedenfor.

      Reference: SitePoint CSS Reference: Tomceller Ejendom

        Ordafstand på inlineelementer

        I Firefox 3.x, en negativ værdi på word-spacing ejendom vil blive behandlet som nul på tilstødende inline elementer. Den negative værdi skal medføre, at inlineelementerne overlapper hinanden, som det ville være tilfældet med tekst, men det sker ikke. I stedet er elementerne netop givet nul hvide rumseparation uden overlapning.

        Billedet nedenfor viser både de korrekte og forkerte implementeringer:

        I eksemplerne vist ovenfor er de tre ord "Frugter", "Grøntsager" og "Andre fødevarer" indpakket individuelt elementer, mens det afsnit, der ombryder dem, har dets word-spacing ejendom sat til en negativ værdi.

        Det andet eksempel (Firefox) undlader at anvende den negative ordafstand, undtagen mellem de sidste to ord, fordi disse ord ikke er individuelt indpakket af spændinger, men er naturlige tekstelementer.

        Som et sidepunkt forekommer denne fejl ligeledes i IE8, men ikke i tidligere versioner af IE.

        Reference: SitePoint CSS Reference: Ord-afstand Ejendom

          Tekst dekoration på flydende efterkommere

          Når et element har et sæt sæt tekstdekoration, bør denne værdi ikke arves af flydende efterkommere. I Firefox 3.x får flydende efterkommere de samme tekstindsmykningsværdier som deres forælder, selvom det ikke burde være tilfældet.

          I billedet ovenfor er den første linje et skærmbillede fra IE8, der viser en elementet floated inde i et anker. Teksten inde i har ikke en synlig tekstdekoration, som er den rigtige måde at vise den på. I Firefox (vist i andet eksempel) er tekstdekorationen forkert anvendt til den flydende .

          Du har måske bemærket denne fejl i Firefox, når du forsøger at fjerne tekstdekorationen fra flydende billeder indenfor ankre.

          Reference: SitePoint CSS Reference: tekst-dekoration Ejendom

            pre-line og pre-wrap for white-space ejendom i FF 3.0

            Bruger white-space ejendom i Firefox 3.5, kan du angive, om flere mellemrumstegn skal collapse ned til et enkelt rum eller ej. Som standard vil HTML-dokumenter kollapse flere mellemrum ned til et enkelt rum. I nogle tilfælde kan du søge white-space: pre for at forhindre hvide rum i at blive sammenbrudt, hvilket svarer til brugen af 

              HTML-tag.  Efterfølgende kan du fjerne denne indstilling ved hjælp af white-space:  pre-line  (for at kollapse det hvide rum). 
              Firefox 3.0 understøtter ikke denne værdi, så det hvide rum bevares.  Firefox 3.5 kollapser pladsen korrekt.  Billedet nedenfor viser begge eksempler: 
              Tilsvarende, når et tekststykke er indstillet til white-space:  pre-wrap  , dette bør bevare hvide mellemrum mellem ord, men bør naturligvis omfatte linjeskift.  Firefox 3.0 undlader at gennemføre dette korrekt, mens nyere versioner (og alle andre browsere) indeholder naturlinjepauserne.  Begge eksempler er vist nedenfor. 
              Husk at det ydre element er givet white-space: pre  mens en indre   forsøger at tilsidesætte manglen på linjeskift ved hjælp af pre-wrap  .  På egen hånd pre-wrap  ville ikke have nogen virkning. 
              Firefox 3.x behandler også nogle af de white-space  Værdierne er forskellige fra andre browsere, når disse værdier anvendes til