Koda

CSS-fel och inkonsekvenser i Firefox 3.x

Det finns inte många artiklar som täcker inkompatibiliteter, eller CSS-skillnader i Firefox ensam - och med god anledning.

Firefox har alltid gjort ett utmärkt bra jobb att stödja både CSS och JavaScript på ett standardkompatibelt sätt utan för många besvärliga buggar.

Det finns dock några CSS-egenskaper och selektorer som inte stöds av en eller flera av versionerna som släppts sedan version 3.0, som jag kommer att täcka här.

Denna artikel kommer att täcka fel, inkonsekvenser och nonsupport . Så om du har problem med en CSS-egenskap eller -valkare i Firefox och det är inte listat här, så kommer du troligen att behöva ompröva din layout och ompröva vad den skyldige skulle kunna vara.

Eftersom Firefox 2 är praktiskt taget obefintlig , Jag kommer inte att överväga den versionen specifikt, men den här informationen brukar gälla för den versionen som standard.

Och jag bör notera att materialet för detta inlägg togs huvudsakligen från nyligen uppdaterade Sitepoint CSS-referens , som är hands-down den bästa och mest omfattande CSS-referensen tillgänglig var som helst.

Överskridningsfelet

I Firefox 3.x, när ett element överflödar gränsen till en förälder som har outline egenskapsuppsättningen, kommer konturen att sträcka sig för att passa det innehållande elementet, som visas i skärmbilden nedan:

Det korrekta genomförandet visas i nästa skärmupptagning från Chrome:

Som det framgår ovan ska konturen omfatta det element som skisseras och bör inte påverkas av överflödiga element. För att säkerställa att det inte finns någon förvirring, notera att det här är ett fel i implementeringen av outline egendom, inte den border fast egendom.

Referens: SitePoint CSS Referens: disposition Egenskap

    Tabeller med kollapsade gränser

    I Firefox, när ett bord har sina gränser inställda på collapse använda border-collapse egenskap, tabellens övre och vänstra marginaler i förhållande till närliggande element är 1 pixel av. Detta visas i en skärmdump som zoomats in i bilden nedan, som visar den nedre gränsen för ett blocknivåelement (rött) som rör den övre gränsen på ett kollapsat bord (blå):

    Här är korrekt implementering av det här egenskaps- / värdeparet, som visas i Chrome:

    Som visas ovan, eftersom gränserna är "kollapsade" och eftersom bordet inte är ett blockelement, borde det vara en liten kompensation i den vänstra marginalen och toppmarginalen ska vara jämn med den nedre gränsen på elementet ovanför den.

    Referens: SitePoint CSS-referens: gränsöverskridande egenskap

      Tomma celler i tabellrader

      Detta är ett fastighetsvärde som inte implementeras korrekt av någon webbläsare, inklusive Firefox. När en tabellrad inte har något synligt innehåll och alla dess celler har sina empty-cells fastighet satt till hide , hela raden ska bete sig som om den var inställd på "display: none", utan gränser eller bakgrunder synliga.

      Ingen webbläsare hanterar det här korrekt, så tabellraden är fortfarande synlig, som visas i bilden nedan.

      Referens: SitePoint CSS Referens: Tomceller Egenskaper

        Ordutrymme på inline-element

        I Firefox 3.x, ett negativt värde på word-spacing egendom kommer att behandlas som noll på intilliggande inline-element. Det negativa värdet ska orsaka att inline-elementen överlappar varandra, vilket skulle vara fallet med text, men det händer inte. Istället ges elementen bara noll vit mellanseparation utan överlappning.

        Bilden nedan visar både de korrekta och felaktiga implementeringarna:

        I de exemplen som visas ovan är de tre orden "Frukter", "Grönsaker" och "Övriga livsmedel" individuellt inslagna i element, medan det stycke som omslag dem har sin word-spacing egenskapen satt till ett negativt värde.

        Det andra exemplet (Firefox) misslyckas med att tillämpa det negativa ordavståndet, förutom mellan de två sista orden, eftersom dessa ord inte är individuellt inslagna av spänner, men är naturliga textelement.

        Som en sidopunkt förekommer detta fel på samma sätt i IE8, men inte i tidigare versioner av IE.

        Referens: SitePoint CSS-referens: ordavstånd Egenskap

          Textdekoration på flytande efterkommande

          När ett element har ett text-dekorationsvärde bör detta värde inte ärftas av flytande ättlingar. I Firefox 3.x får flytande ättlingar samma text-dekorationsvärden som deras förälder, även om detta inte borde vara fallet.

          I bilden ovan är den första raden en skärmdump från IE8, som visar a elementet svängde inuti ett ankare. Texten inuti har ingen synlig textdekoration, vilket är det rätta sättet att visa det. I Firefox (visas i det andra exemplet) är textdekorationen felaktigt tillämpad på flytande .

          Du kanske har märkt det här felet i Firefox när du försöker ta bort textdekoration från flytande bilder inuti ankare.

          Referens: SitePoint CSS Referens: Text-decoration Egenskap

            pre-line och pre-wrap för egenskapen White Space i FF 3.0

            Använda white-space egenskap i Firefox 3.5, kan du ange om flera mellanslag tecken ska kollapsas ner till ett enda utrymme eller ej. Som standard kommer HTML-dokument att kollapsera flera mellanslag ner till ett enda utrymme. I vissa fall kan du ansöka white-space: pre för att förhindra att det vita rymden kollapsas, vilket liknar användningen av 

              HTML-tagg.  Därefter kan du ta bort den inställningen med white-space:  pre-line  (för att kollapsera vitt utrymme). 
              Firefox 3.0 stöder inte detta värde, så det vita utrymmet kommer att behållas.  Firefox 3.5 kollapsar utrymmet korrekt.  Bilden nedan visar båda exemplen: 
              På liknande sätt, när en texttext är inställd på white-space:  pre-wrap  , detta bör bevara vita mellanslag mellan ord, men bör naturligtvis innehålla raster.  Firefox 3.0 lyckades inte implementera det här korrekt, medan senare versioner (och alla andra webbläsare) innehåller rader med naturliga rader.  Båda exemplen visas nedan. 
              Tänk på att det yttre elementet ges white-space: pre  medan en inre   försöker överbrygga bristen på radbrytningar med pre-wrap  .  På egen hand, pre-wrap  skulle inte ha någon effekt. 
              Firefox 3.x behandlar också några av white-space  Värden skiljer sig annorlunda från andra webbläsare när dessa värden tillämpas på