divcss兼容性問題-文庫吧
2025-05-23 13:35 本頁面
【正文】 C并不希望繼續(xù)平移，而是希望往下排。 (其中floatA、floatB的屬性已經(jīng)設(shè)置為 float:left。) 這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽閉合。 在 div class=”floatB” div class=”NOTfloatC”之間加上 div class=”clear”這個(gè)div一定要注意位置，而且必須與兩個(gè)具有float屬性的div同級(jí)，之間不能存在嵌套關(guān)系， 否則會(huì)產(chǎn)生異常。 并且將clear這種樣式定義為為如下即可： .clear{ clear:both。} ②作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動(dòng)適應(yīng)，要在wrapper里面加上overflow:hidden。 當(dāng)包含float的 box的時(shí)候，高度自動(dòng)適應(yīng)在IE下無效， 這時(shí)候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE??！)用zoom:1?？梢宰龅?，這樣就達(dá)到了兼容. 例如某一個(gè)wrapper如下定義:.colwrapper{ overflow:hidden。 zoom:1。 margin:5px auto。} ③對(duì)于排版,我們用得最多的css描述可能就是float: div后面做一個(gè)統(tǒng)一的背景,譬如: div id=”page”div id=”left”/div div id=”center”/divdiv id=”right”/div/div比如我們要將page的背景設(shè)置成藍(lán)色,以達(dá)到所有三欄的背景顏色是藍(lán)色的目的,但是我們會(huì)發(fā)現(xiàn)隨著left center right的向下 拉長,而 page居然保存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設(shè)置成float,所以我們應(yīng)該這樣解決 div id=”page” div id=”bg” style=”float:left。width:100%” div id=”left”/div div id=”center”/div div id=”right”/div /div /div 再嵌入一個(gè)float left而寬度是100%的DIV解決之 ④萬能float 閉合(非常重要!) 關(guān)于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup],將以下代碼加入Global CSS 中,給需要閉合的div加上class=clearfix 即可,屢試不爽. /* Clear Fix */ .clearfix:after { content:.。 display:block。 height:0。 clear:both。 visibility:hidden。 } .clearfix { display:inlineblock。 } /* Hide from IE Mac */ .clearfix {display:block。} /* End hide from IE Mac */ /* end of clearfix */ 或者這樣設(shè)置：.hackbox{ display:table。 //將對(duì)象作為塊元素級(jí)的表格顯示} 高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對(duì)象使用margin 或paddign 時(shí)。 例：box {backgroundcolor:eee。 } box p {margintop: 20px。marginbottom: 20px。 textalign:center。 } div id=box pp對(duì)象中的內(nèi)容/p/div 解決方法：在P對(duì)象上下各加2個(gè)空的div對(duì)象CSS代碼：.1{height:0px。overflow:hidden。}或者為DIV加上border屬性。 12 .IE6下為什么圖片下有空隙產(chǎn)生 解決這個(gè)BUG的方法也有很多,可以是改變html的排版,或者設(shè)置img 為display:block 或者設(shè)置verticalalign 屬性為 verticalalign:top | bottom |middle |textbottom 都可以解決. 加上 verticalalign:middle。 style type=text/css ! input { width:200px。 height:30px。
教學(xué)教案相關(guān)推薦
鄂ICP備17016276號(hào)-1