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