Kode

CSS feil og inkonsekvenser i Firefox 3.x

Det er ikke mange artikler som dekker uforlikeligheter, eller CSS-forskjeller i Firefox alene - og med god grunn.

Firefox har alltid gjort en utmerket god jobb med å støtte både CSS og JavaScript på en standard-kompatibel måte uten for mange vanskelige feil.

Det er imidlertid noen få CSS-egenskaper og selektorer som ikke støttes av en eller flere versjoner som er utgitt siden versjon 3.0, som jeg vil dekke her.

Denne artikkelen vil dekke feil, inkonsekvenser og ikke-støtte . Så hvis du har problemer med en CSS-egenskap eller -selektor i Firefox, og det ikke er oppført her, må du sannsynligvis revurdere oppsettet ditt og revurdere hva skyldige kan være.

Siden Firefox 2 er nesten ikke-eksisterende , Jeg vil ikke vurdere denne versjonen spesifikt, men denne informasjonen vil vanligvis gjelde for den versjonen som standard.

Og jeg bør merke at materialet til dette innlegget ble tatt hovedsakelig fra nylig oppdatert Sitepoint CSS referanse , som er hands-down den beste og mest omfattende CSS referansen tilgjengelig hvor som helst.

Overskridelsesoverløpssyklusen

I Firefox 3.x, når et element overgår grensen til en forelder som har outline egenskapssettet, vil omrisset strekke seg slik at det passer til det inneholdende elementet, som vist i skjermbildet nedenfor:

Den riktige implementeringen vises i neste skjermbilde tatt fra Chrome:

Som vist ovenfor skal omrisset omfatte elementet som er skissert, og bør ikke påvirkes av overfylte elementer. For å sikre at det ikke er noen forvirring, merk at dette er en feil i implementeringen av outline eiendom, ikke den border eiendom.

Henvisning: SitePoint CSS Reference: disposisjon Eiendom

    Tabeller med kollapsede grenser

    I Firefox, når et bord har sine grenser satt til collapse bruker border-collapse eiendom, tabellens topp og venstre marginer i forhold til nærliggende elementer er 1 pixel av. Dette vises i et skjermdump som er innstilt i bildet under, som viser den nederste grensen til et blokknivåelement (rødt) som berører den øvre grensen til et sammenbruddstabell (blå):

    Her er riktig implementering av dette egenskaps- / verdiparet, som vist i Chrome:

    Som vist ovenfor, fordi grensene er "kollapset", og fordi bordet ikke er et blokkelement, bør det være en liten forskyvning i venstre marg, og toppmargenen skal være jevn med den nederste grensen til elementet over den.

    Henvisning: SitePoint CSS Reference: border-collapse Eiendom

      Tomme celler i tabellrader

      Dette er en eiendomsverdi som ikke implementeres riktig av en hvilken som helst nettleser, inkludert Firefox. Når en tabellrad ikke har synlig innhold og alle cellene har sine empty-cells eiendom satt til hide , hele raden skal oppføre seg som om den var satt til "display: none", uten grenser eller bakgrunner synlige.

      Ingen nettleser håndterer dette riktig, så tabellraden er fortsatt synlig, som vist på bildet nedenfor.

      Henvisning: SitePoint CSS Reference: Tom-celler Egenskap

        Ordfelt på inlineelementer

        I Firefox 3.x, en negativ verdi på word-spacing Egenskapen vil bli behandlet som null på tilstøtende inlineelementer. Den negative verdien skal føre til at inlineelementene overlapper hverandre, som det ville være tilfelle med tekst, men dette skjer ikke. I stedet blir elementene bare gitt null hvit mellomrom uten overlapping.

        Bildet nedenfor viser både de korrekte og feilaktige implementasjonene:

        I eksemplene vist ovenfor blir de tre ordene "Fruits", "Vegetables" og "Other Foods" individuelt pakket inn i elementer, mens avsnittet som bryter dem har det word-spacing eiendom satt til en negativ verdi.

        Det andre eksempelet (Firefox) mislykkes i å bruke det negative ordavstanden, unntatt mellom de to siste ordene fordi disse ordene ikke er individuelt innpakket av strekker, men er naturlige tekstelementer.

        Som et sidepunkt skjer denne feilen på samme måte i IE8, men ikke i tidligere versjoner av IE.

        Henvisning: SitePoint CSS Referanse: Ord-avstand Eiendom

          Tekstdekorasjon på flytende etterkommere

          Når et element har en tekstdekorasjonsverdi, må denne verdien ikke arves av flytende etterkommere. I Firefox 3.x får flytende etterkommere de samme tekstdekorasjonsverdiene som foreldrene deres, selv om dette ikke burde være tilfelle.

          I bildet over er første linjen et skjermbilde fra IE8, som viser en elementet svømte inn i et anker. Teksten inne i har ikke en synlig tekstdekorasjon, som er den riktige måten å vise den på. I Firefox (vist i det andre eksempelet) er tekstdekorasjonen feil brukt på flytende .

          Du har kanskje lagt merke til denne feilen i Firefox når du prøver å fjerne tekstdekorasjonen fra flytende bilder inni ankre.

          Henvisning: SitePoint CSS Referanse: tekst-dekorasjon Eiendom

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

            Bruker white-space egenskap i Firefox 3.5, kan du angi om flere mellomromstegn skal kollapses ned til et enkelt mellomrom eller ikke. Som standard vil HTML-dokumenter kollapse flere mellomrom ned til et enkelt mellomrom. I noen tilfeller kan du søke white-space: pre for å hindre at hvitt rom blir kollapset, noe som ligner på bruken av 

              HTML-tagg.  Deretter vil du kanskje fjerne denne innstillingen ved hjelp av white-space:  pre-line  (for å kollapse hvitt mellomrom). 
              Firefox 3.0 støtter ikke denne verdien, så den hvite plassen blir beholdt.  Firefox 3.5 kollapser plassen riktig.  Bildet nedenfor viser begge eksemplene: 
              Tilsvarende, når et avsnitt med tekst er satt til white-space:  pre-wrap  , dette bør bevare hvite mellomrom mellom ord, men bør naturligvis inkludere linjeskift.  Firefox 3.0 klarer ikke å implementere dette riktig, mens nyere versjoner (og alle andre nettlesere) inkluderer naturlinjepausene.  Begge eksemplene er vist nedenfor. 
              Husk at ytre elementet er gitt white-space: pre  mens en indre   forsøker å overstyre mangelen på linjeskift ved hjelp av pre-wrap  .  På egen hånd, pre-wrap  ville ikke ha noen effekt. 
              Firefox 3.x behandler også noen av white-space  verdier annerledes enn andre nettlesere når disse verdiene blir brukt på