代碼兼容性問(wèn)題-資料下載頁(yè)
2025-06-07 14:38本頁(yè)面
【正文】 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/div scrīpt type=text/javascrīpt /* ![CDATA[ */ function toBreakWord(el, intLen){ var ōbj=(el)。 var strContent=。 var strTemp=。 while(intLen){ strTemp+=(0,intLen)+amp。10。 strContent=(intLen,)。 } strTemp+=amp。10。+strContent。 =strTemp。 } if( amp。amp。 !) toBreakWord(ff, 37)。 /* ]] */ /scrīpt ?xml version= encoding=gb2312? !DOCTYPE html PUBLIC //W3C//DTD XHTML Strict//EN meta equiv=ContentType content=text/html。 charset=gb2312 / style type=text/css ! div { cursor:pointer。 width:200px。 height:200px。 border:10px solid red } /style div ōnclick=alert()讓FireFox與IE兼容/div 問(wèn)題的差別在于容器的整體寬度有沒(méi)有將邊框（border）的寬度算在其內(nèi),這里IE6解釋為200PX ,而FF則解釋為220PX,那究竟是怎么導(dǎo)致的問(wèn)題呢？大家把容器頂部的xml去掉就會(huì)發(fā)現(xiàn)原來(lái)問(wèn)題出在這,頂部的申明觸發(fā)了IE的qurks mode,關(guān)于qurks mode、 standards mode的相關(guān)知識(shí),請(qǐng)參考:: // IE6,IE7,FF 出來(lái)了，對(duì)CSS的支持又有新問(wèn)題。瀏覽器多了，網(wǎng)頁(yè)兼容性更差了，疲于奔命的還是我們 ，找來(lái)了下面這篇文章：現(xiàn)在我大部分都是用!important來(lái)hack，對(duì)于ie6和firefox測(cè)試可以正常顯示，但是ie7對(duì)!important可以正確解釋，會(huì)導(dǎo)致頁(yè)面沒(méi)按要求顯示！下面是三個(gè)瀏覽器的兼容性收集. 第一種，是CSS HACK的方法 height:20px。 /*For Firefox*/ *height:25px。 /*For IE7 amp。 IE6*/ _height:20px。 /*For IE6*/ 注意順序。 這樣也屬于CSS HACK，不過(guò)沒(méi)有上面這樣簡(jiǎn)潔。 example { color: 333。 } /* Moz */ * html example { color: 666。 } /* IE6 */ *+html example { color: 999。 } /* IE7 */ !其他瀏覽器 link rel=stylesheet type=text/css href= / ![if IE 7] ! 適合于IE7 link rel=stylesheet type=text/css href= / ![endif] ![if lte IE 6] ! 適合于IE6及一下 link rel=stylesheet type=text/css href= / ![endif] 第三種，css filter的辦法，以下為經(jīng)典從國(guó)外網(wǎng)站翻譯過(guò)來(lái)的。. 新建一個(gè)css樣式如下： item { width: 200px。 height: 200px。 background: red。 } 新建一個(gè)div,并使用前面定義的css的樣式： div id=itemsome text here/div 在body表現(xiàn)這里加入lang屬性,中文為zh： body lang=en 現(xiàn)在對(duì)div元素再定義一個(gè)樣式： *:lang(en) item{ background:green !important。 } 這樣做是為了用!important覆蓋原來(lái)的css樣式,由于:,所以對(duì)這句話不會(huì)有任何作用,于是也達(dá)到了 ,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式： item:empty { background: green !important } :empty選擇器為css3的規(guī)范,盡管safari并不支持此規(guī)范,但是還是會(huì)選擇此元素,不管是否此元素存在,現(xiàn)在綠色會(huì)現(xiàn)在在除ie各版本以外的瀏覽器上。 對(duì)IE6和FF的兼容可以考慮以前的!important 個(gè)人比較喜歡用w3c標(biāo)準(zhǔn)中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的尺寸。 一旦為頁(yè)面設(shè)置了恰當(dāng)?shù)?DTD，大多數(shù)瀏覽器都會(huì)按照w3c標(biāo)準(zhǔn)模式呈現(xiàn)內(nèi)容。然而 IE 5 和 6 的呈現(xiàn)卻是不正確的。根據(jù) W3C 的規(guī)范，元素內(nèi)容占據(jù)的空間是由 width 屬性設(shè)置的，而內(nèi)容周圍的 padding 和 border 值是另外計(jì)算的。不幸的是， 和 6 在怪異模式中使用自己的非標(biāo)準(zhǔn)模型。這些瀏覽器的 width 屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。 雖然有方法解決這個(gè)問(wèn)題。但是目前最好的解決方案是回避這個(gè)問(wèn)題。也就是，不要給元素添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素和子元素。 CSS 規(guī)范指出，邊框繪制在“元素的背景之上”。這很重要。 CSS2 指出背景只延伸到內(nèi)邊距，而不是邊框。后來(lái) 進(jìn)行了更正：元素的背景是內(nèi)容、內(nèi)邊距和邊框區(qū)的背景。大多數(shù)瀏覽器都遵循 定義，不過(guò)一些較老的瀏覽器可能會(huì)有不同的表現(xiàn)。 borderstyle所有瀏覽器都支持 borderstyle 屬性。none 定義無(wú)邊框。 hidden 與 none 相同。不過(guò)應(yīng)用于表時(shí)除外，對(duì)于表，hidden 用于解決邊框沖突。 dotted 定義點(diǎn)狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。 dashed 定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。 solid 定義實(shí)線。 double 定義雙線。雙線的寬度等于 borderwidth 的值。 groove 定義 3D 凹槽邊框。其效果取決于 bordercolor 的值。 ridge 定義 3D 壟狀邊框。其效果取決于 bordercolor 的值。 inset 定義 3D inset 邊框。其效果取決于 bordercolor 的值。 outset 定義 3D outset 邊框。其效果取決于 bordercolor 的值。 inherit 規(guī)定應(yīng)該從父元素繼承邊框樣式。 (任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 inherit。) 最不可預(yù)測(cè)的邊框樣式是 double。它定義為兩條線的寬度再加上這兩條線之間的空間等于 borderwidth 值。不過(guò)，CSS 規(guī)范并沒(méi)有說(shuō)其中一條線是否比另一條粗或者兩條線是否應(yīng)該是一樣的粗，也沒(méi)有指出線之間的空間是否應(yīng)當(dāng)比線粗。所有這些都有用戶代理決定，創(chuàng)作人員對(duì)這個(gè)決定沒(méi)有任何影響。透明邊框 CSS2 引入了邊框顏色值 transparent。這個(gè)值用于創(chuàng)建有寬度的不可見(jiàn)邊框。某種意義上說(shuō)，利用 transparent，使用邊框就像是額外的內(nèi)邊距一樣；此外還有一個(gè)好處，就是能在你需要的使用使其可見(jiàn)。這種透明邊框相當(dāng)于內(nèi)邊距，因?yàn)樵氐谋尘皶?huì)延伸到邊框區(qū)域（如果有可見(jiàn)背景的話）。css margin注意 Netscape 和 IE 對(duì) body 標(biāo)簽定義的默認(rèn)邊距（margin）值是 8px。而 Opera 不是這樣。相反地，Opera 將內(nèi)部填充（padding）的默認(rèn)值定義為 8px，因此如果希望對(duì)整個(gè)網(wǎng)站的邊緣部分進(jìn)行調(diào)整，并將之正確顯示于 Opera 中，那么必須對(duì) body 的 padding 進(jìn)行自定義。css外邊距合并 外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。 合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。 外邊距合并初看上去可能有點(diǎn)奇怪，但是實(shí)際上，它是有意義的。以由幾個(gè)段落組成的典型文本頁(yè)面為例。第一個(gè)段落上面的空間等于段落的上外邊距。如果沒(méi)有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁(yè)面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。層的絕對(duì)定位：
教學(xué)教案相關(guān)推薦
鄂ICP備17016276號(hào)-1