html5兼容性問題(文件)
【正文】 阻隔，則就會(huì)出現(xiàn)邊界重疊現(xiàn)象。283之所以這樣稱呼，是因?yàn)樵谔囟l件下欄目?jī)?nèi)容看起來消失了，只有重新刷新頁(yè)面時(shí)才能夠出現(xiàn)，或者用鼠標(biāo)拖選可以使其顯示。 浮動(dòng)布局中欄目?jī)?nèi)容被隱藏的問題出現(xiàn)這個(gè)Bug的原因比較特殊，一般需要幾個(gè)前提條件：第一，包含框中包含有浮動(dòng)元素和流動(dòng)元素，且包含框定義了背景色。方法一，學(xué)會(huì)在浮動(dòng)元素后面增加清除元素。3第二，浮動(dòng)邊相鄰的是一個(gè)流動(dòng)元素或包含框，而不是浮動(dòng)元素。 半個(gè)像素問題這個(gè)問題存在于所有IE瀏覽器版本中。FF等標(biāo)準(zhǔn)瀏覽器對(duì)于小數(shù)值一般采取忽略不計(jì)的方法，多出的值將按元素順序進(jìn)行分配。 浮動(dòng)布局的兼容性處理這樣它就能夠強(qiáng)迫所有的子元素并列顯示。 浮動(dòng)布局的兼容性處理解決方法：利用IE 6及其以下版本瀏覽器的過濾器，專門為它們定義樣式實(shí)現(xiàn)與標(biāo)準(zhǔn)瀏覽器的兼容。當(dāng)多個(gè)浮動(dòng)元素中間夾雜有HTML注釋語(yǔ)句時(shí)，如果浮動(dòng)元素寬度為100%，則就會(huì)在下面一行多顯示一個(gè)上一行最后一個(gè)字符。 定位參照物的問題這個(gè)問題存在于IE 6及其以下版本瀏覽器中。 定位布局的兼容性處理問題原因：IE瀏覽器能夠根據(jù)相同結(jié)構(gòu)層次的定位元素進(jìn)行比較，如果不在同一個(gè)結(jié)構(gòu)層次，則先比較相同層級(jí)的父元素，誰(shuí)的父元素zindex屬性值大誰(shuí)就在上面，而不管其子元素的zindex屬性值有多大。解決方法：為紅盒子的包含塊定義較大的層疊值。當(dāng)在一個(gè)包含塊內(nèi)并列浮動(dòng)幾個(gè)元素，它們的寬度之和整好等于包含塊的寬度，這時(shí)如果在包含塊內(nèi)嵌入絕對(duì)定位元素，則該定位元素就會(huì)丟失。4方法四，我們也可以在浮動(dòng)元素和絕對(duì)定位元素之間增加一個(gè)清除浮動(dòng)元素，從而強(qiáng)迫定位元素與浮動(dòng)元素位于不同行中，從而顯示出來。 定位元素丟失問題方法三，上面兩種方法都是通過加寬或收縮邊界的方法，為定位元素騰出一點(diǎn)空間，從而誘發(fā)它顯示出來。方法二，受上面方法的啟發(fā)，我們也可以不定義負(fù)邊界，而直接為包含塊定義多出3像素。 定位布局的兼容性處理這樣即使紅盒子的層疊順序值為多大都將被覆蓋在下面。當(dāng)定位元素位于不同的結(jié)構(gòu)中時(shí)，它們之間的層疊順序就不能夠簡(jiǎn)單使用zindex屬性來控制。解決此類問題的方法很簡(jiǎn)單，直接為span增加zoom屬性，該屬性能夠觸發(fā)span自動(dòng)布局，而從促使絕對(duì)定位元素以span元素為參照物進(jìn)行定位。4 浮動(dòng)布局的兼容性處理 3像素問題這個(gè)問題存在于IE 6及其以下版本瀏覽器中。聲明是一個(gè)比較神奇的工具，對(duì)于IE瀏覽器來說，不管所包含的子元素寬度有多大，它都能夠強(qiáng)迫子元素在同一行內(nèi)顯示。不過在布局中很多取值是無法預(yù)定的，所以使用下面這個(gè)方法是最安全的。如果包含框?qū)挾葹?0像素，則每個(gè)子元素平分3像素，多出的1像素分給第1個(gè)子元素。對(duì)于小數(shù)值問題，不同類型瀏覽器取舍方法不同：IE將根據(jù)四舍五入的方法進(jìn)行計(jì)算。解決該問題方法比較簡(jiǎn)單：3 同時(shí)設(shè)置邊界和浮動(dòng)布局的問題這個(gè)問題存在于IE 6及其以下版本瀏覽器中。方法二，在結(jié)構(gòu)嵌套中應(yīng)遵循最少的層次來滿足頁(yè)面設(shè)計(jì)需要，使頁(yè)面結(jié)構(gòu)簡(jiǎn)單，容易控制與管理，盡可能的減小由于不必要的嵌套引來的Bug。 浮動(dòng)布局的兼容性處理第三，在流動(dòng)元素的下面是一個(gè)清除元素（即元素定義清除浮動(dòng)屬性），或者是一個(gè)被定義了寬度且寬度足以促使元素只能夠顯示在浮動(dòng)元素的底部，而不是環(huán)繞在浮動(dòng)元素的兩側(cè)。293 浮動(dòng)布局中欄目?jī)?nèi)容被隱藏的問題這個(gè)問題存在于IE 6及其以下版本瀏覽器中。解決方法：為包含框定義邊框或者補(bǔ)白，從而阻斷相互嵌套元素的上下邊界接觸，防止發(fā)生重疊現(xiàn)象，則阻斷邊界接觸。該問題存在于所有瀏覽器中。 /* 定義邊框來觸發(fā)布局 */} 方法：wrap { /* 包含框樣式 */background:FFCCFF。263 浮動(dòng)被流動(dòng)包含問題這是所有瀏覽器都存在的問題，即當(dāng)一個(gè)自然流到的元素包含一個(gè)浮動(dòng)的元素時(shí)，則包含元素會(huì)自動(dòng)收縮，而不是被浮動(dòng)元素?fù)伍_。 流動(dòng)布局的兼容性處理當(dāng)在超鏈接中嵌套一個(gè)子標(biāo)簽時(shí)，如果希望利用超鏈接來動(dòng)態(tài)控制子標(biāo)簽的顯示樣式，就會(huì)出現(xiàn)控制失效問題。 /* 定
教學(xué)教案相關(guān)推薦
鄂ICP備17016276號(hào)-1