代碼兼容性問(wèn)題-在線瀏覽
2025-07-25 14:38本頁(yè)面
【正文】 iv應(yīng)用這個(gè)樣式后，div的透明png背景圖片自動(dòng)透明了。 charset=gb2312 /title無(wú)標(biāo)題文檔/titlestyle type=text/css!.qq {height: 90px。backgroundimage: url()!important。_filter: progid:(src=39。)。 /* IE6 */}/style/headbodydiv class=qq/div/body/html 第 2 種方法: 給img定義樣式，頁(yè)面上所有透明png即自動(dòng)透明了。必須放在和html相同的目錄請(qǐng)勿大量使用，否則會(huì)導(dǎo)致頁(yè)面打開很慢!!!) !DOCTYPE html PUBLIC //W3C//DTD XHTML Transitional//EN html xmlns=headmeta equiv=ContentType content=text/html。amp。.png39。 + + 39。image39。url(39。39。)39。39。 + + 39。crop39。}/style/headbody換成你的png圖片div class=mypngimg src= width=30 height=30 /img src= width=30 height=30 /img src= width=30 height=30 //div/body/html 第 3 種方法:用JS實(shí)現(xiàn),加上一段js代碼后,所有插入的透明png自動(dòng)透明了.（注意，這方法也是只對(duì)直接插入的圖片有效，對(duì)背景圖無(wú)效）!DOCTYPE html PUBLIC //W3C//DTD XHTML Transitional//EN html xmlns=headmeta equiv=ContentType content=text/html。 6.{ var arVersion = (MSIE) var version = parseFloat(arVersion[1]) if ((version = ) amp。 ()) { for(var j=0。 j++) { var img = [j] var imgName = () if ((, ) == PNG) { var imgID = () ? id=39。 : var imgClass = () ? class=39。 : var imgTitle = () ? title=39。 : title=39。 var imgStyle = display:inlineblock。 + imgStyle if ( == right) imgStyle = float:right。 + imgStyle var strNewHTML = span + imgID + imgClass + imgTitle + style=\ + width: + + px。 + imgStyle + 。 + + \39。scale39。\/span = strNewHTML j = j1 } } } }(onload, correctPNG)。}/style/headbody把圖片換成你自己的圖片img src=img/ width=30 height=30 /!把圖片換成你自己的圖片 img src=img/ width=30 height=30 /img src=img/ width=130 height=36 //body/html 方法四script language=javascript// 修復(fù) IE 下 PNG 圖片不能透明顯示的問(wèn)題function fixPNG(myImage) {var arVersion = (MSIE)。if ((version = ) amp。 (version 7) amp。 ()){ var imgID = () ? id=39。 : 。 + + 39。 var imgTitle = () ? title=39。 : title=39。 。 + 。 height: + + px。 + filter:progid: + (src=\39。, sizingMethod=39。)。 = strNewHTML。 }///script用法如下：img src= width=328 height=325 border=0 onload=fixPNG(this) /！important 優(yōu)先級(jí)兼容IE6 2. margin加倍的問(wèn)題 4 .IE與寬度和高度的問(wèn)題 IE 不認(rèn)得min這個(gè)定義 5. 頁(yè)面的最小寬度 min width是個(gè)非常方便的CSS命令 左邊對(duì)象浮動(dòng) 。自適應(yīng)高度。 將行距增加到和整個(gè)DIV一樣高 lineheight:200px。缺點(diǎn)是要控制內(nèi)容不要換行 2. margin加倍的問(wèn)題 設(shè)置為float（浮動(dòng)）的div在ie下設(shè)置的margin會(huì)加倍。解決方案是在這個(gè)div里面加上 display:inline。 margin:5px。/*IE下再理解為5px*/} box{ float:left。 margin:0 0 0 100px。 //使浮動(dòng)忽略} 這里細(xì)說(shuō)一下block與inline兩個(gè)元素 block元素的特點(diǎn)是,總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素)。 box{ display:block。 //實(shí)現(xiàn)同一行排列的效果 diplay:table。這樣問(wèn)題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會(huì)變，如果只用minwidth和minheight的話，IE下面根本等于沒(méi)有設(shè)置寬度和高度。要解決這個(gè)問(wèn)題，可以這樣： box{ width: 80px。}htmlbody box{ width: auto。 minwidth: 80px。} min width是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。為了讓這一命令在IE上也能用，可以把一個(gè)div 放到 body 標(biāo)簽下，然后為div指定一個(gè)類, 然后CSS這樣設(shè)計(jì)： container{ minwidth: 600px。} 第一個(gè)minwidth是正常的；但第2行的width使用了Javascript，這只有IE才認(rèn)得，這也會(huì)讓你的HTML文檔不太正規(guī)。 左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來(lái)定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有3px的間距. box{ float:left。} left{ float:left。} right{ width:50%。 //這句是關(guān)鍵} div id=box div id=left/div div id=right/div /div 當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接，DIV等這個(gè)時(shí)候容易發(fā)生捉迷藏的問(wèn)題。 解決辦法：對(duì)layout使用lineheight屬性或者給layout使用固定高和寬。 。自適應(yīng)高度。(其中floatA、floatB的屬性已經(jīng)設(shè)置為 float:left。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽閉合。并且將clear這種樣式定義為為如下即可： .clear{ clear:both。 當(dāng)包含float的 box的時(shí)候，高度自動(dòng)適應(yīng)在IE下無(wú)效，這時(shí)候應(yīng)該觸發(fā)IE的layout私有屬性(萬(wàn)惡的IE??！)用zoom:1。 例如某一個(gè)wrapper如下定義： .colwrapper{ overflow:hidden。 margin:5px auto。width:100%” div id=”left”/div div id=”center”/div div id=”right”/div /div /div 再嵌入一個(gè)float left而寬度是100%的DIV解決之 ④萬(wàn)能float 閉合(非常重要!) 關(guān)于 clear float 的原理可參見(jiàn) [How To Clear Floats Without Structural Markup],將以下代碼加入Global CSS 中,給需要閉合的div加上 class=clearfix 即可,屢試不爽. /* Clear Fix */ .clearfix:after { content:.。 height:
教學(xué)教案相關(guān)推薦
鄂ICP備17016276號(hào)-1