自己整理的CSS兼容解決方法.doc

自己整理的CSS兼容解決方法自己整理的CSS兼容解決方法您是第1093位瀏覽者CSS 對瀏覽器的兼容性有時(shí)讓人很頭疼,或許當(dāng)你了解當(dāng)中的技巧跟原理,就會(huì)覺得也不是難事,從網(wǎng)上收集了IE7,6與Fireofx的兼容性處理方法并整理了 一下.對于web2.0的過度,請盡量用xhtml格式寫代碼,而且DOCTYPE 影響 CSS 處理,作為W3C的標(biāo)準(zhǔn),一定要加DOCTYPE聲明.CSS技巧1.div的垂直居中問題vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行2. margin加倍的問題設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍。這是一個(gè)ie6都存在的bug。解決方案是在這個(gè)div里面加上display:inline;例如：相應(yīng)的css為#IamFloatfloat:left;margin:5px;/*IE下理解為10px*/display:inline;/*IE下再理解為5px*/3.浮動(dòng)ie產(chǎn)生的雙倍距離#box float:left; width:100px; margin:0 0 0 100px; /這種情況之下IE會(huì)產(chǎn)生200px的距離 display:inline; /使浮動(dòng)忽略這里細(xì)說一下block與inline兩個(gè)元素：block元素的特點(diǎn)是,總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點(diǎn)是,和其他元素在同一行上,不可控制(內(nèi)嵌元素);#box display:block; /可以為內(nèi)嵌元素模擬為塊元素 display:inline; /實(shí)現(xiàn)同一行排列的效果 diplay:table;4 IE與寬度和高度的問題IE 不認(rèn)得min-這個(gè)定義，但實(shí)際上它把正常的width和height當(dāng)作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩 個(gè)值就不會(huì)變，如果只用min-width和min-height的話，IE下面根本等于沒有設(shè)置寬度和高度。比如要設(shè)置背景圖片，這個(gè)寬度是比較重要的。要解決這個(gè)問題，可以這樣：#box width: 80px; height: 35px;htmlbody #box width: auto; height: auto; min-width: 80px; min-height: 35px;5.頁面的最小寬度min -width是個(gè)非常方便的CSS命令，它可以指定元素最小也不能小于某個(gè)寬度，這樣就能保證排版一直正確。但I(xiàn)E不認(rèn)得這個(gè)，而它實(shí)際上把width當(dāng) 做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個(gè) 放到 標(biāo)簽下，然后為div指定一個(gè)類, 然后CSS這樣設(shè)計(jì)：#container min-width: 600px; width:expression(document.body.clientWidth 600? 600px: auto );第一個(gè)min-width是正常的；但第2行的width使用了Javascript，這只有IE才認(rèn)得，這也會(huì)讓你的HTML文檔不太正規(guī)。它實(shí)際上通過Javascript的判斷來實(shí)現(xiàn)最小寬度。6.DIV浮動(dòng)IE文本產(chǎn)生3象素的bug左邊對象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來定位，右邊對象內(nèi)的文本會(huì)離左邊有3px的間距.#box float:left; width:800px;#left float:left; width:50%;#right width:50%;*html #left margin-right:-3px; /這句是關(guān)鍵7.IE捉迷藏的問題當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接，DIV等這個(gè)時(shí)候容易發(fā)生捉迷藏的問題。有些內(nèi)容顯示不出來，當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁面。 解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結(jié)構(gòu)盡量簡單。8.float的div閉合;清除浮動(dòng);自適應(yīng)高度; 例如：這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。(其中floatA、floatB的屬性已經(jīng)設(shè)置為 float:left這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽 閉合。在 之間加上 這個(gè)div一定要注意位置，而且必須與兩個(gè)具有float屬性的div同級，之間不能存在嵌套關(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;對于排版,我們用得最多的css描述可能就是float:left.有的時(shí)候我們需要在n欄的float div后面做一個(gè)統(tǒng)一的背景,譬如:比 如我們要將page的背景設(shè)置成藍(lán)色,以達(dá)到所有三欄的背景顏色是藍(lán)色的目的,但是我們會(huì)發(fā)現(xiàn)隨著left center right的向下拉長,而 page居然保存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設(shè)置成float,所以我們應(yīng)該這樣解決再嵌入一個(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:inline-block; /* Hide from IE Mac */.clearfix display:block;/* End hide from IE Mac */* end of clearfix */或者這樣設(shè)置：.hackbox display:table; /將對象作為塊元素級的表格顯示11.高度不適應(yīng)高度不適應(yīng)是當(dāng)內(nèi)層對象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對象使用margin 或paddign 時(shí)。例：#box background-color：#eee; #box p margin-top: 20px;margin-bottom: 20px; text-align:center; p對象中的內(nèi)容解決方法：在P對象上下各加2個(gè)空的div對象CSS代碼：.1height:0px;overflow:hidden;或者為DIV加上border屬性。12 .IE6下為什么圖片下有空隙產(chǎn)生解 決這個(gè)BUG的方法也有很多,可以是改變html的排版,或者設(shè)置img 為display:block 或者設(shè)置vertical-align 屬性為 vertical-align:top | bottom |middle |text-bottom 都可以解決.13.如何對齊文本與文本輸入框加上 vertical-align:middle;14.web標(biāo)準(zhǔn)中定義id與class有什么區(qū)別嗎一.web標(biāo)準(zhǔn)中是不容許重復(fù)ID的,比如 div id=aa 不容許重復(fù)2次,而class 定義的是類,理論上可以無限重復(fù), 這樣需要多次引用的定義便可以使用他.二.屬性的優(yōu)先級問題ID 的優(yōu)先級要高于class,看上面的例子三.方便JS等客戶端腳本,如果在頁面中要對某個(gè)對象進(jìn)行腳本操作,那么可以給他定義一個(gè)ID,否則只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費(fèi)時(shí)間資源,遠(yuǎn)遠(yuǎn)不如一個(gè)ID來得簡單.15. LI中內(nèi)容超過長度后以省略號顯示的方法此方法適用與IE與OP瀏覽器16.為什么web標(biāo)準(zhǔn)中IE無法設(shè)置滾動(dòng)條顏色了解決辦法是將body換成html17.為什么無法定義1px左右高度的容器IE6下這個(gè)問題是因?yàn)槟J(rèn)的行高造成的,解決的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px18.怎么樣才能讓層顯示在FLASH之上呢解決的辦法是給FLASH設(shè)置透明19.怎樣使一個(gè)層垂直居中于瀏覽器中這里我們使用百分比絕對定位,與外補(bǔ)丁負(fù)值的方法,負(fù)值的大小為其自身寬度高度除以二頁頭:header登錄條:loginBar標(biāo)志:logo側(cè)欄:sideBar廣告:banner導(dǎo)航:nav子導(dǎo)航:subNav菜單:menu子菜單:subMenu搜索:search滾動(dòng):scroll頁面主體:main內(nèi)容:content標(biāo)簽頁:tab文章列表:list提示信息:msg小技巧:tips欄目標(biāo)題:title友情鏈接:friendLink頁腳:footer加入:joinus指南:guild服務(wù):service熱點(diǎn):hot新聞:news下載:download注冊:register狀態(tài):status按鈕:btn投票:vote合作伙伴:partner版權(quán):copyRight1.CSSID的命名外套:wrap主導(dǎo)航:mainNav子導(dǎo)航:subnav頁腳:footer整個(gè)頁面:content頁眉:header頁腳:footer商標(biāo):label標(biāo)題:title主導(dǎo)航:mainNav(globalNav)頂導(dǎo)航:topnav邊導(dǎo)航:sidebar左導(dǎo)航:leftsideBar右導(dǎo)航:rightsideBar旗志:logo標(biāo)語:banner菜單內(nèi)容1:menu1Content菜單容量:menuContainer子菜單:submenu邊導(dǎo)航圖標(biāo):sidebarIcon注釋:note面包屑:breadCrumb(即頁面所處位置導(dǎo)航提示)容器:container內(nèi)容:content搜索:search登陸:login功能區(qū):shop(如購物車，收銀臺)當(dāng)前的current2.樣式文件命名主要的:master.css布局版面:layout.css專欄:columns.css文字:font.css打印樣式:print.css主題:themes.css4，對于有float的，在最后一定要消除float效果當(dāng)然，如果你只為兼容IE6，大可以不必消除5，減少嵌套，看到很多新手在最開始寫的時(shí)候往往會(huì)有大量的嵌套（表格布局的后遺癥吧）6，先布大塊，在布小塊7，不要有過多的頁面注釋，我曾經(jīng)修改的一個(gè)頁面完全變形，找了半天也沒發(fā)現(xiàn)是什么問題，偶爾中刪除了其中一條注釋，居然好了，這個(gè)不清楚是什么原因，希望有高人指點(diǎn)一下。8，在沒有特殊要求的情況下不要設(shè)置高度其實(shí)學(xué)習(xí)CSS+DIV很簡單的，只要搞清楚其中的幾個(gè)屬性就可以完成布局。一，搞清float樣式Div標(biāo)簽的默認(rèn)寬度為百分之百，也就是說當(dāng)兩個(gè)div并列的時(shí)候產(chǎn)生的效果是第二個(gè)div會(huì)在第一個(gè)的下一行，但是布局的時(shí)候一定會(huì)有一行兩列的情形出現(xiàn)，這個(gè)時(shí)候我們就要引入float(再次啰嗦，一定要記得清除浮動(dòng))這個(gè)就是最簡單的一行兩列二，一定要搞清楚padding,border,margin的含義比如有兩幅表好的畫畫到邊框的舉例為padding邊框?yàn)閎order兩幅畫之間的距離為margin其中padding算入寬高之內(nèi)，顏色為background的顏色邊框算入寬高之外border:1px solid #000(1像素黑色實(shí)線)Margin沒有顏色屬性（另外說下，在有float屬性的時(shí)候在IE6會(huì)造成margin雙倍的問題，這個(gè)時(shí)候只要加入display:inline即可解決）三，關(guān)于相對定位，絕對定位和空間定位絕對定位：position: absolute;有如下兩種情況1，沒有設(shè)定 Top、Right、Bottom、Left 的情況，默認(rèn)依據(jù)父級的“內(nèi)容區(qū)域原始點(diǎn)”為原始點(diǎn)2，有設(shè)定 Top、Right、Bottom、Left 的情況，這里又分了兩種情況如下：(1)，父級沒 position 屬性，瀏覽器左上角(即 Body)為“坐標(biāo)原始點(diǎn)”進(jìn)行定位，位置由 Top、Right、Bottom、Left 屬性決定(2)，父級有 position 屬性，父級的“坐標(biāo)原始點(diǎn)”為原始點(diǎn)相對定位：position: relative;參照父級的“內(nèi)容區(qū)域原始點(diǎn)”為原始點(diǎn)，無父級則以 Body 的“內(nèi)容區(qū)域原始點(diǎn)”為原始點(diǎn)，位置由 Top、Right、Bottom、Left 屬性決定，并且會(huì)在父塊以外占據(jù)相同的大小，所以不推薦使用。空間定位：z-index：數(shù)值當(dāng)兩個(gè)板塊之間用絕對定位產(chǎn)生上下的時(shí)候，可以用z-index來決定哪個(gè)板塊再上，數(shù)值大的位于數(shù)值小的上方。做一個(gè)簡單的陰影效果：陰影效果陰影效果*注意一點(diǎn)，當(dāng)設(shè)置left屬性的時(shí)候不要設(shè)置right，同樣，設(shè)置top之后不要設(shè)置bottom完全理解以上三點(diǎn)之后，就可以進(jìn)行自己的CSS+DIV制作最后說一些關(guān)于IE6,IE7和FF的兼容問題以及一些小技巧1，hack方法FF,IE7可以識別!importantIE6，IE7識別*IE6識別_#hackwidth:500px;*width:400px!important;_width:300px寬度在FF下為500，IE7下400，IE6下300就我個(gè)人來說，padding值對于FF和IE系列的解析并不相同（個(gè)人感覺），為了達(dá)到完全一直而使用hack，一般情況下不需要使用這種方法2，當(dāng)有float屬性時(shí)，margin在IE6下雙倍，可加入display:inline來解決3，想要有最小高度并根據(jù)內(nèi)容自伸縮可以用以下方法設(shè)置min-height:500px!important;_height:500px，F(xiàn)F和IE7會(huì)以min-height值為最小高度并按內(nèi)容伸縮，height對于IE6為最小高度并按內(nèi)容伸縮4，對于FF想要板塊根據(jù)頁面居中需在父塊設(shè)置margin:0 auto5，div標(biāo)簽沒有垂直居中的概念，所以當(dāng)只有一行文字的時(shí)候，想要垂直居中只需將line-height設(shè)置與height相同即可6，W3C標(biāo)準(zhǔn)寫法：（1）所有卷標(biāo)元素名稱都使用小寫錯(cuò)誤 正確 （2）所有沒有成對的空標(biāo)簽必須以 /結(jié)尾錯(cuò)誤： 正確： （3）不允許使用target=_blank在HTML4.01可以使用target=_blank,但XHTML1.0是不被允許的,你可以改寫為 target=new（4）特殊字符以符號表示比如空格使用(5) 正確使用CSS樣式表錯(cuò)誤 正確 (6) 同一個(gè)id選擇器不可重復(fù)使用(7) 絕對不可省略雙引號或單引號本文為個(gè)人原創(chuàng)，部分內(nèi)容節(jié)選自網(wǎng)絡(luò)，歡迎各位大大指出錯(cuò)誤，小弟在此敬禮。【原創(chuàng)】CSS+DIV簡易教程，個(gè)人經(jīng)驗(yàn)?zāi)堑?486位瀏覽者_(dá)首先先聲明，本人學(xué)習(xí)是根據(jù)國外頁面CSS文件自行摸索，對很多概念化的東西并不理解，比如盒子模型等，完全不知道是什么意思再說幾點(diǎn)注意事項(xiàng)1，用DW創(chuàng)建新的頁面的時(shí)候，會(huì)出現(xiàn)一堆英文，如下：此段不可刪除，為W3C標(biāo)準(zhǔn)?。ㄓ浀米铋_始老師教的時(shí)候我問過是什么意思，他老人家告訴我是廣告，囧）2，各個(gè)標(biāo)簽對之間都有默認(rèn)的margin等值，所以最開始要設(shè)置為0div,p,span,form,ul,ol,li,input margin:0;padding:0;border:0; 一，搞清float樣式Div標(biāo)簽的默認(rèn)寬度為百分之百，也就是說當(dāng)兩個(gè)div并列的時(shí)候產(chǎn)生的效果是第二個(gè)div會(huì)在第一個(gè)的下一行，但是布局的時(shí)候一定會(huì)有一行兩列的情形出現(xiàn)，這個(gè)時(shí)候我們就要引入float(再次啰嗦，一定要記得清除浮動(dòng))這個(gè)就是最簡單的一行兩列二，一定要搞清楚padding,border,margin的含義比如有兩幅表好的畫畫到邊框的舉例為padding邊框?yàn)閎order兩幅畫之間的距離為margin其中padding算入寬高之內(nèi)，顏色為background的顏色邊框算入寬高之外border:1px solid #000(1像素黑色實(shí)線)Margin沒有顏色屬性（另外說下，在有float屬性的時(shí)候在IE6會(huì)造成margin雙倍的問題，這個(gè)時(shí)候只要加入display:inline即可解決）三，關(guān)于相對定位，絕對定位和空間定位絕對定位：position: absolute;有如下兩種情況1，沒有設(shè)定 Top、Right、Bottom、Left 的情況，默認(rèn)依據(jù)父級的“內(nèi)容區(qū)域原始點(diǎn)”為原始點(diǎn)2，有設(shè)定 Top、Right、Bottom、Left 的情況，這里又分了兩種情況如下：(1)，父級沒 position 屬性，瀏覽器左上角(即 Body)為“坐標(biāo)原始點(diǎn)”進(jìn)行定位，位置由 Top、Right、Bottom、Left 屬性決定(2)，父級有 position 屬性，父級的“坐標(biāo)原始點(diǎn)”為原始點(diǎn)相對定位：position: relative;參照父級的“內(nèi)容區(qū)域原始點(diǎn)”為原始點(diǎn)，無父級則以 Body 的“內(nèi)容區(qū)域原始點(diǎn)”為原始點(diǎn)，位置由 Top、Right、Bottom、Left 屬性決定，并且會(huì)在父塊以外占據(jù)相同的大小，所以不推薦使用?？臻g定位：z-index：數(shù)值當(dāng)兩個(gè)板塊之間用絕對定位產(chǎn)生上下的時(shí)候，可以用z-index來決定哪個(gè)板塊再上，數(shù)值大的位于數(shù)值小的上方。做一個(gè)簡單的陰影效果：陰影效果陰影效果*注意一點(diǎn)，當(dāng)設(shè)置left屬性的時(shí)候不要設(shè)置right，同樣，設(shè)置top之后不要設(shè)置bottom完全理解以上三點(diǎn)之后，就可以進(jìn)行自己的CSS+DIV制作最后說一些關(guān)于IE6,IE7和FF的兼容問題以及一些小技巧1，hack方法FF,IE7可以識別!importantIE6，IE7識別*IE6識別_#hackwidth:500px;*width:400px!important;_width:300px寬度在FF下為500，IE7下400，IE6下300就我個(gè)人來說，padding值對于FF和IE系列的解析并不相同（個(gè)人感覺），為了達(dá)到完全一直而使用hack，一般情況下不需要使用這種方法2，當(dāng)有float屬性時(shí)，margin在IE6下雙倍，可加入display:inline來解決3，想要有最小高度并根據(jù)內(nèi)容自伸縮可以用以下方法設(shè)置min-height:500px!important;_height:500px，F(xiàn)F和IE7會(huì)以min-height值為最小高度并按內(nèi)容伸縮，height對于IE6為最小高度并按內(nèi)容伸縮4，對于FF想要板塊根據(jù)頁面居中需在父塊設(shè)置margin:0 auto5，div標(biāo)簽沒有垂直居中的概念，所以當(dāng)只有一行文字的時(shí)候，想要垂直居中只需將line-height設(shè)置與height相同即可6，W3C標(biāo)準(zhǔn)寫法：（1）所有卷標(biāo)元素名稱都使用小寫錯(cuò)誤 正確 （2）所有沒有成對的空標(biāo)簽必須以 /結(jié)尾錯(cuò)誤： 正確： （3）不允許使用target=_blank在HTML4.01可以使用target=_blank,但XHTML1.0是不被允許的,你可以改寫為 target=new（4）特殊字符以符號表示比如空格使用(5) 正確使用CSS樣式表錯(cuò)誤 正確 (6) 同一個(gè)id選擇器不可重復(fù)使用(7) 絕對不可省略雙引號或單引號本文為個(gè)人原創(chuàng)，部分內(nèi)容節(jié)選自網(wǎng)絡(luò)，歡迎各位大大指出錯(cuò)誤，小弟在此敬禮。CSS對瀏覽器器的兼容性問題CSS對瀏覽器器的兼容性具有很高的價(jià)值，通常情況下IE和Firefox存在很大的解析差異，這里介紹一下兼容要點(diǎn)。常見兼容問題：1.DOCTYPE 影響 CSS 處理2.FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行3.FF: body 設(shè)置 text-align 時(shí), div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要用 !important 多設(shè)一個(gè) height 和 width5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行7.cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以8.FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò)位, 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格。9.在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：divmargin:30px!important;margin:28px;注意這兩個(gè)margin的順序一定不能寫反，據(jù)阿捷的說法!important這個(gè)屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實(shí)解釋成這樣：divmaring:30px;margin:28px重復(fù)定義的話按照最后一個(gè)來執(zhí)行，所以不可以只寫margin:XXpx!important;10.IE5 和IE6的BOX解釋不一致IE5下divwidth:300px;margin:0 10px 0 10px;div的寬度會(huì)被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計(jì)算的。這時(shí)我們可以做如下修改divwidth:300px!important;width /*/:340px;margin:0 10px 0 10px關(guān)于這個(gè)/*/是什么我也不太明白，只知道IE5和firefox都支持但I(xiàn)E6不支持，如果有人理解的話，請告訴我一聲，謝了?。海?1.ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義ulmargin:0;padding:0;就能解決大部分問題注意事項(xiàng)：1、float的div一定要閉合。例如：(其中floatA、floatB的屬性已經(jīng)設(shè)