html5兼容性問(wèn)題-資料下載頁(yè)
2025-06-07 13:34本頁(yè)面
【正文】 條件：第一，元素同時(shí)被定義了邊界和浮動(dòng)顯示，且浮動(dòng)方向和定義邊界方向在一個(gè)方向。第二，浮動(dòng)邊相鄰的是一個(gè)流動(dòng)元素或包含框，而不是浮動(dòng)元素。當(dāng)滿足這兩個(gè)條件之后，所定義的邊界會(huì)加倍顯示。解決該問(wèn)題方法比較簡(jiǎn)單：3 浮動(dòng)布局的兼容性處理 半個(gè)像素問(wèn)題這個(gè)問(wèn)題存在于所有IE瀏覽器版本中。我們知道像素值是沒(méi)有小數(shù)值的，但是當(dāng)在布局中使用百分比設(shè)置單位，就會(huì)存在計(jì)算的像素值出現(xiàn)小數(shù)部分。對(duì)于小數(shù)值問(wèn)題，不同類(lèi)型瀏覽器取舍方法不同：IE將根據(jù)四舍五入的方法進(jìn)行計(jì)算。例如，則IE在解析時(shí)會(huì)根據(jù)四舍五入的方法，計(jì)算為11像素，則計(jì)算結(jié)果為10像素。FF等標(biāo)準(zhǔn)瀏覽器對(duì)于小數(shù)值一般采取忽略不計(jì)的方法，多出的值將按元素順序進(jìn)行分配。例如，包含框?qū)挾葹?1像素，平分為3個(gè)子元素，則每個(gè)子元素平分3像素，多出的2像素按順序分給第2個(gè)子元素。如果包含框?qū)挾葹?0像素，則每個(gè)子元素平分3像素，多出的1像素分給第1個(gè)子元素。3 浮動(dòng)布局的兼容性處理 半個(gè)像素問(wèn)題解決方法：這是一個(gè)比較特殊的問(wèn)題，最佳方法當(dāng)然是避免此類(lèi)問(wèn)題的出現(xiàn)，即不要設(shè)置包含框?qū)挾葹橐粋€(gè)奇數(shù)值。不過(guò)在布局中很多取值是無(wú)法預(yù)定的，所以使用下面這個(gè)方法是最安全的。即為包含的子元素定義清除右側(cè)浮動(dòng)。這樣它就能夠強(qiáng)迫所有的子元素并列顯示。其實(shí)clear:right。聲明是一個(gè)比較神奇的工具，對(duì)于IE瀏覽器來(lái)說(shuō)，不管所包含的子元素寬度有多大，它都能夠強(qiáng)迫子元素在同一行內(nèi)顯示。3 浮動(dòng)布局的兼容性處理 3像素問(wèn)題這個(gè)問(wèn)題存在于IE 6及其以下版本瀏覽器中。當(dāng)浮動(dòng)元素與流動(dòng)元素并列顯示時(shí)，它們之間會(huì)存在3像素的間距。解決方法：利用IE 6及其以下版本瀏覽器的過(guò)濾器，專(zhuān)門(mén)為它們定義樣式實(shí)現(xiàn)與標(biāo)準(zhǔn)瀏覽器的兼容。3 浮動(dòng)布局的兼容性處理 多出字符問(wèn)題這個(gè)問(wèn)題存在于IE 6版本瀏覽器中。當(dāng)多個(gè)浮動(dòng)元素中間夾雜有HTML注釋語(yǔ)句時(shí)，如果浮動(dòng)元素寬度為100%，則就會(huì)在下面一行多顯示一個(gè)上一行最后一個(gè)字符。解決方法：可以清除注釋語(yǔ)句即可。4 定位布局的兼容性處理 定位參照物的問(wèn)題這個(gè)問(wèn)題存在于IE 6及其以下版本瀏覽器中。當(dāng)定義行內(nèi)元素為包含塊時(shí)，且包含塊包含的絕對(duì)定位元素以百分比為單位進(jìn)行定位時(shí)，就會(huì)出現(xiàn)參照物混亂現(xiàn)象。解決此類(lèi)問(wèn)題的方法很簡(jiǎn)單，直接為span增加zoom屬性，該屬性能夠觸發(fā)span自動(dòng)布局，而從促使絕對(duì)定位元素以span元素為參照物進(jìn)行定位。4 定位布局的兼容性處理 定位元素的結(jié)構(gòu)與層疊問(wèn)題這個(gè)問(wèn)題存在于所有IE版本中。當(dāng)定位元素位于不同的結(jié)構(gòu)中時(shí)，它們之間的層疊順序就不能夠簡(jiǎn)單使用zindex屬性來(lái)控制。定位元素的層疊順序還要受結(jié)構(gòu)關(guān)系的影響。問(wèn)題原因：IE瀏覽器能夠根據(jù)相同結(jié)構(gòu)層次的定位元素進(jìn)行比較，如果不在同一個(gè)結(jié)構(gòu)層次，則先比較相同層級(jí)的父元素，誰(shuí)的父元素zindex屬性值大誰(shuí)就在上面，而不管其子元素的zindex屬性值有多大。在上面示例中，藍(lán)盒子的層疊順序?yàn)?，而紅盒子的包含塊層疊順序?yàn)?（默認(rèn)值），由于藍(lán)盒子與紅盒子的包含塊屬于同一個(gè)層級(jí)，所以藍(lán)盒子就會(huì)覆蓋紅盒子的包含塊。這樣即使紅盒子的層疊順序值為多大都將被覆蓋在下面。這個(gè)規(guī)則對(duì)于非IE瀏覽器來(lái)說(shuō)是無(wú)效的。解決方法：為紅盒子的包含塊定義較大的層疊值。4 定位布局的兼容性處理 定位元素丟失問(wèn)題這個(gè)問(wèn)題存在于IE 6及其以下版本瀏覽器中。當(dāng)在一個(gè)包含塊內(nèi)并列浮動(dòng)幾個(gè)元素，它們的寬度之和整好等于包含塊的寬度，這時(shí)如果在包含塊內(nèi)嵌入絕對(duì)定位元素，則該定位元素就會(huì)丟失。方法一，通過(guò)為每個(gè)欄目收縮一個(gè)像素邊界，從而顯示丟失的絕對(duì)定位元素。方法二，受上面方法的啟發(fā)，我們也可以不定義負(fù)邊界，而直接為包含塊定義多出3像素。這個(gè)3像素是根據(jù)所包含的欄目塊來(lái)定的，如果僅包含兩個(gè)欄目塊，則應(yīng)該是2像素。4 定位布局的兼容性處理 定位元素丟失問(wèn)題方法三，上面兩種方法都是通過(guò)加寬或收縮邊界的方法，為定位元素騰出一點(diǎn)空間，從而誘發(fā)它顯示出來(lái)。我們也可以為包含的最后一個(gè)子欄目使用絕對(duì)定位，從而避免浮動(dòng)元素占滿整個(gè)包含塊的空間。方法四，我們也可以在浮動(dòng)元素和絕對(duì)定位元素之間增加一個(gè)清除浮動(dòng)元素，從而強(qiáng)迫定位元素與浮動(dòng)元素位于不同行中，從而顯示出來(lái)。
教學(xué)教案相關(guān)推薦
鄂ICP備17016276號(hào)-1