代碼兼容、技巧

代碼兼容、技巧

前端開發中，一個頭疼的事，就是代碼的不兼容，這里貼出自己在前端開發中的一些解決經驗。除了其瀏覽器本身的BUG外，不建議使用CSS hack來解決兼容性問題的。

IE和FF下對”li“的的高度解析不同

可以不定義高度，直接定義行高。再讓li浮動 消除IE的BUG。

IE3像素問題

出現3培訓BUG 時， 可以采用右邊層margin-right: -3px; 解決。

需要圖片在層中是垂直居中

當需要圖片在層中是垂直居中，可以圖片定義vertical-align: middle;，再在圖片左側加入<span></span>，定義樣式display: inline-block; height: 100%; vertical-align: middle; 就是兼容的了。

子元素浮動,父元素不能自動適應高度

FF IE7下可以在父元素定義overflow: auto; IE6加入 zoom: 1; 這個觸發IE的.layout。或在浮動元素后加入在浮動層后面加入<br clear="all" style="line-height: 0" />。

IE6雙邊距

浮動元素的外邊距會加倍，但與第一個浮動元素相鄰的其他浮動元素外邊距不會加倍。解決方法：在此浮動元素增加樣式 display:inline;

IE下圖片產生的間隙

父元素直接包含<img>，這個圖片下方會和父元素邊緣產生間隙。 解絕方法：1.在源代碼中讓</div> 和<img>在同一行，因為那個間隙是由換行符產生的。2.給<img>添加樣式 display:block;

IE下高度低于14像素時問題

塊元素最小高度為10px，當高度定義小于14px時，仍為12px 左右; 解決方法：為此塊元素添加樣式 overflow:hidden; 或font-size: 0;

IE，FF下列表的li為浮動，則列表后面的元素不能換行的問題

解決方法：為這個ul定義合適的高或給包含這個ul 的父div定義合適的高。或加上<br clear="all" style="line-height: 0" />

IE,FF下子元素的上下外邊界問題

IE6：子元素的上邊距和父元素的上內邊距疊加。FF：子元素的上邊距和父元素的上內邊距相加。解決方法：1、給父元素定義內邊距。2、父元素設置邊框，子元素定義上外邊距。3、父元素定義overflow: hidden;，子元素定義上外邊距。

IE,FF高度自適應問題（最小高度）

在IE6下子元素的高度能夠撐開父元素，但FF，IE7下不可以。解決辦法：父元素定義min-height:高度值; height:auto !important; height:高度值; （要注意先后順序不能錯）

IE,FF高度自適應問題（最大高度，最小寬度，最大寬度）

最大高度，max-height: 180px; _height: expression( this.scrollHeight > 180 ? "180px" : "auto" ); 后面兩條是解決IE6問題。

最小寬度，min-width: 900px; _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<900?"900px":"");

最大寬度，max-width: 300px; _width:expression((document.documentElement.clientWidth||document.body.clientWidth)>300?"300px":"");

子元素負邊距問題

IE6：超出父元素的部分會被父元素覆蓋。FF：分兩種情況當父元素有邊框或內邊距時，超出父元素的部分會覆蓋父元素；沒有時父元素擁有負邊距。解決方法：子元素定義相對定位。

IE6詭異的奇數BUG

當父元素相對定位，子元素絕對定位時，倘若父元素的高或寬的數值是奇數，那么IE6下絕對位置會出錯。解決方法： 數值改成偶數，IE6是大俠，只要服從它。

IE6和IE7下，相對定位元素不能滾動的Bug

這個BUG以前沒遇到過，近期配合自動滾屏時遇到了，開始以為是JS問題，在哪找啊找，后來無果，嘗試看看是不是CSS的問題，果不其然，萬 惡的IE6,7，當設置了position: relative后，其元素就不能滾動了，要想解決其BUG，需要使其包裹他們的父元素也相對定位，這個時候IE7可以完美解決，IE6嘛，里面的定位坐 標可能需要實時修正下。

li元素中有右浮動，同時此元素還是英文數字

此種情況，正常下由于li不清除浮動，也不會有影響，但是對與Opear,哈哈，杯具來了，兩種方法，清除每個li的浮動，再就是定義字體為 宋體。究其原因，清浮動好理解，但是為什么宋體也能解決。不過了這個BUG是Opear的.同時當li浮動后，其內部若有inline-block元素， 其父元素的行高和高對其不會產生效果，這一現象出現在此種情況，正常下由于li不清除浮動，也不會有影響，但是對與Opear

input、button在IE下隨文字增加內補丁也增加

不管你怎么寫margin:0;padding:0;都去不掉，唯一的解決辦法是overflow:visible。

ul浮動引起的li雙倍間距，IE6下

大伙聽到可能會說，這不是IE6的浮動雙間距BUG，其實不然，是的話也就不在這里說了。很困惑，讓其LI也浮動，無果。其他瀏覽器正常，那 該是什么呢，退回到原始狀態，我們已經定義list-style: none; 應該不會有默認的什么產生。查看ul，li的基本屬性，發現有個list-style-position，列表項目標記放置在文本以內是否對齊，兩個值， 默認的outside，不對其。還有inside，對其。那么會不會是他影響。不死心，強制定義下list-style-position: outside;哈哈，一切變的和諧了，既然是默認的，IE6啊，真實整死人不償命啊，此后，我對li的重置里直接加了這條。

IE8下兩個inline標簽的問題

當我們讓兩個inline標簽在一行，且中間沒有空格，這一般是很正常的寫法如label后面跟個span。這個時候倘若只定義行高，那問題來了，其他解析正常。IE8會多出兩個像素。一般解決的話，就是兩個inline標簽換行寫.或者給它定義高度。

來自：http://www.webfeike.net/d2/content/op_code.htm