WEB前端開(kāi)發(fā)必備之瀏覽器兼容性處理方法大全

1、瀏覽器兼容性處理方法大全1、居中問(wèn)題div里的內(nèi)容，IE默認(rèn)為居中，而FF默認(rèn)為左對(duì)齊，可以嘗試增加代碼margin: 0 auto;2、高度問(wèn)題兩上下排列或嵌套的div，上面的div設(shè)置高度(height)，如果div里的實(shí)際內(nèi)容大于所設(shè)高度，在FF中會(huì)出現(xiàn)兩個(gè)div重疊的現(xiàn)象；但在IE中，下面的div會(huì)自動(dòng)給上面的div讓出空間所以為避免出現(xiàn)層的重疊，高度一定要控制恰當(dāng)，或者干脆不寫高度，讓他自動(dòng)調(diào)節(jié)，比較好的方法是 height:100%;但當(dāng)這個(gè)div里面一級(jí)的元素都float了的時(shí)候，則需要在div塊的最后，閉和前加一個(gè)沉底的空div，對(duì)應(yīng)CSS是：.float_bottom cle

2、ar:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;3、clear:both;不想受到float浮動(dòng)的，就在div中寫入clear:both;4、IE浮動(dòng) margin產(chǎn)生的雙倍距離#box float:left; width:100px; margin:0 0 0 100px; /這種情況之下IE會(huì)產(chǎn)生200px的距離 display:inline; /使浮動(dòng)忽略 5、padding問(wèn)題FF設(shè)置 padding 后，div會(huì)增加 height 和 width，

3、但I(xiàn)E不會(huì) （* 標(biāo)準(zhǔn)的 XHTML1.0 定義 dtd 好像一致了）高度控制恰當(dāng)，或嘗試使用 height:100%;寬度減少使用 padding但根據(jù)實(shí)際經(jīng)驗(yàn)，一般FF和IE的 padding 不會(huì)有太大區(qū)別，div 的實(shí)際寬 = width + padding ，所以div寫全 width 和 padding，width 用實(shí)際想要的寬減去 padding 定義。6、div嵌套時(shí) y軸上 padding和 marign的問(wèn)題FF里 y 軸上 子div 到 父div 的距離為 父padding + 子marignIE里 y 軸上 子div 到 父div 的距離為 父padding 和 子m

4、arign 里大的一個(gè)FF里 y 軸上 父padding=0 且 border=0 時(shí)，子div 到 父div 的距離為0，子marign 作用到 父div 外面7、padding，marign，height，width的傻瓜式解決技巧注意是技巧，不是方法：寫好標(biāo)準(zhǔn)頭 高盡量用padding，慎用margin，height盡量補(bǔ)上100%，父級(jí)height有定值子級(jí)height不用100%，子級(jí)全為浮動(dòng)時(shí)底部補(bǔ)個(gè)空clear:both的div寬盡量用margin，慎用padding，width算準(zhǔn)實(shí)際要的減去padding8、列表類1. ul標(biāo)簽在FF中默認(rèn)是有 padding值的，而在IE中

5、只有margin有值先定義 ul margin:0;padding:0;2. ul和ol列表縮進(jìn)問(wèn)題消除ul、ol等列表的縮進(jìn)時(shí)，樣式應(yīng)寫成: list-style:none;margin:0px;padding:0px;9、顯示類（display:block,inline）1. display:block,inline兩個(gè)元素 display:block; /可以為內(nèi)嵌元素模擬為塊元素 display:inline; /實(shí)現(xiàn)同一行排列的的效果 display:table; /for FF,模擬table的效果 display:block 塊元素，元素的特點(diǎn)是： 總是在新行上開(kāi)始；高度，行高以

6、及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度 ， 和 是塊元素的例子 display:inline 就是將元素顯示為行內(nèi)元素，元素的特點(diǎn)是：和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。， 和 是 inline 元素的例子2.鼠標(biāo)手指狀顯示 全部用標(biāo)準(zhǔn)的寫法 cursor: pointer;10、背景、圖片類1. background顯示問(wèn)題 全部注意補(bǔ)齊 width，height 屬性2.背景透明問(wèn)題 IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,

7、opacity=60); IE: filter: alpha(opacity=10); FF: opacity:0.6; FF: -moz-opacity:0.10; 最好兩個(gè)都寫，并將opacity屬性放在下面11、min-height最小高度的實(shí)現(xiàn)（兼容IE6、IE7、FF）作用是：當(dāng)容器的內(nèi)容較少時(shí)，能保持一個(gè)最小的高度，以免破壞了布局或UI設(shè)計(jì)效果。而當(dāng)容器內(nèi)的內(nèi)容增加的時(shí)候，容器能夠自動(dòng)的伸展以適應(yīng)內(nèi)容的變化。#mrjin background:#ccc; min-height:100px; height:auto !important; height:100px; overflow

8、:visible;12、著名的 Meyer Reset（重置）html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6，p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legen

9、d,table, caption, tbody, tfoot, thead, tr, th, td margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; :focus outline: 0; body line-height: 1; color: black; background: white; ol, ul list-style: none

10、; table border-collapse: separate; border-spacing: 0; caption, th, td text-align: left; font-weight: normal; blockquote:before, blockquote:after,q:before, q:after content: ;blockquote, q quotes: ;13、跨瀏覽器的CSS透明度.transparent opacity: 0.7; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70)

11、; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7;14、文字陰影（CSS3）.text text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); 15、Box陰影(CSS3).box box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; 16

12、、Sticky Footer (讓頁(yè)腳永遠(yuǎn)?？吭陧?yè)面底部，而不是根據(jù)絕對(duì)位置) CSS: * margin:0; padding:0; html, body, #wrap height: 100%; body #wrap height: auto; min-height: 100%; #main padding-bottom: 150px; #footer position: relative; margin-top: -150px; height: 150px; clear:both; .clearfix:after content: .; display: block; height: 0

13、; clear: both; visibility: hidden; .clearfix display: inline-block;* html .clearfix height: 1%; .clearfix display: block;17、iframe元素內(nèi)嵌頁(yè)面如何去掉繼承的html及body背景色/背景圖片iframe元素的功能是在一個(gè)文檔里內(nèi)嵌一個(gè)文檔，創(chuàng)建一個(gè)浮動(dòng)的幀。內(nèi)嵌文檔時(shí)一個(gè)完整的頁(yè)面，有HTML,BODY等屬性。這樣遇到了一個(gè)問(wèn)題，如果樣式表中對(duì)BODY定義過(guò)背景色/背景圖片，那么內(nèi)嵌文檔將全部繼承過(guò)來(lái)。所以如何去掉背景色和背景圖片：【1】去掉背景色：filter:C

14、hroma(Color=white);舉例：【2】去掉背景圖片：舉例：注意：內(nèi)嵌頁(yè)面同時(shí)也要增加BODY屬性：18、為什么web標(biāo)準(zhǔn)中無(wú)法設(shè)置IE瀏覽器滾動(dòng)條顏色了？原來(lái)樣式設(shè)置：bodyscrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-co

15、lor:#fff; 解決辦法是將body換成html。19、為什么中火狐瀏覽器下文本無(wú)法撐開(kāi)容器的高度？標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會(huì)象IE6里那樣被撐開(kāi)的,那我又想固定高度，又想能被撐開(kāi)需要怎樣設(shè)置呢？辦法就是去掉height設(shè)置min-height:200px; 這里為了照顧不認(rèn)識(shí)min-height的IE6 可以這樣定義：div height:auto!important; height:200px; min-height:200px; 20、如何定義1px左右高度的容器？IE6下這個(gè)問(wèn)題是因?yàn)槟J(rèn)的行高造成的，解決的方法也有很多，例如：overflow:hidden | zoom:

16、0.08 | line-height:1px21、怎么樣才能讓層顯示在FLASH之上呢？解決的辦法是給FLASH設(shè)置透明:a href=22、怎樣使一個(gè)div層居中于瀏覽器中？23、怎樣使div背景透明？首先，需要這兩個(gè)層都是兄弟關(guān)系，其次，這兩個(gè)層都需要絕對(duì)定位。舉個(gè)例子： Colinivys world body font:normal 12px/30px Verdana; #test position:relative; width:400px; height:50px; #inner z-index:2; position:absolute; top:10px; left:10px;

17、width:380px; height:30px; color:#003; font-weight:bold; text-align:center; #transbox z-index:1; position:absolute; top:0px; left:0px; width:400px; height:50px; background:#eef;border:1px solid #a00; filter:alpha(opacity=40); -moz-opacity:0.4; opacity:0.4; 這里很多的文字,這里很多的文字,這里很多的文字,這里很多的文字, BlueIdea,Bl

18、ueIdea,BlueIdea 24、怎樣去掉選中時(shí)的虛線框？利用onfocus=this.blur();例如：測(cè)試25、ie6下png背景顯示問(wèn)題？針對(duì)ie6下png背景顯示問(wèn)題,CSS中可以這樣解決:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=26、文字與表單對(duì)齊方法？設(shè)置表單元素第一字體為Tahoma(Verdana系列也可),并設(shè)置vertical-align:middle.建設(shè)大家把這個(gè)約定寫入CSS RESET中,能減小很多麻煩:

19、body,button,input,select,textareafont:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle27、optgroup標(biāo)簽的用法？optgroup標(biāo)簽,鮮為人知,它對(duì)提升選擇表單用戶體驗(yàn)很有幫助。就是可以在有很多選項(xiàng)時(shí),對(duì)這些選項(xiàng)分組：例子：one selecttwo selectthree selectfour select28、文字與圖片垂直居中對(duì)齊方法？為圖片與文字的共同父元素所有的后代元素定義*vertical-align:middle;例如:我要的堅(jiān)強(qiáng)只需定義p*vertical-align:m

20、iddle即可使文字與圖片同行垂直居中.29、文章標(biāo)題列表中日期居右顯示的兩種方法？方法A相對(duì)方法B省資源,但比方法B要多寫兩句代碼,使用時(shí)請(qǐng)視情況而定:方法A： 這是文章標(biāo)題2010-10-10然后定義p和span的樣式：p position:relativep span position:absolute; right:0方法B:2010-10-10這是文章標(biāo)題然后定義span右浮動(dòng):p spanfloat:right30、ie6下max/min-width/height實(shí)現(xiàn)？ie6下max/min-width/height實(shí)現(xiàn),_width: expression_r(this.width 600 ? “600px” : true);,height同理.31、空白外邊距互相疊加的問(wèn)題？一般通過(guò)添加透明邊框或者1px的內(nèi)邊距避免；其一,為外圍元素定義透明邊框.具體到本例,即在樣式div中加入border: