今天沈陽網(wǎng)站開發(fā)總結(jié)了一些關(guān)于一些css技巧來和大家一起分享,希望您看過之后會(huì)有所幫助。
IE,FF高度自適應(yīng)問題(最大高度,最小寬度,最大寬度)
最大高度,max-height: 180px; _height: expression( this.scrollHeight > 180 ? "180px" : "auto" ); 后面兩條是解決IE6問題。
最小寬度,min-width: 900px; _width: expression(this.width < 600 ? 600: true);
最大寬度,max-width: 300px; _width: expression(this.width > 600 ? 600: true);
子元素負(fù)邊距問題
IE6:超出父元素的部分會(huì)被父元素覆蓋。FF:分兩種情況當(dāng)父元素有邊框或內(nèi)邊距時(shí),超出父元素的部分會(huì)覆蓋父元素;沒有時(shí)父元素?fù)碛胸?fù)邊距。解決方法:子元素定義相對(duì)定位。同時(shí)IE下子容器如果包含屬性position:relative,則父容器失效(IE bug),所以也需要設(shè)置父容器position:relative解決,IE6需要zoom:1來觸發(fā)haslayout
IE6詭異的奇數(shù)BUG
當(dāng)父元素相對(duì)定位,子元素絕對(duì)定位時(shí),倘若父元素的高或?qū)挼臄?shù)值是奇數(shù),那么IE6下絕對(duì)位置會(huì)出錯(cuò)。解決方法: 數(shù)值改成偶數(shù),IE6是大俠,只要服從它。
需要圖片在層中是垂直居中
當(dāng)需要圖片在層中是垂直居中,可以圖片定義vertical-align: middle;,再在圖片左側(cè)加入,定義樣式display: inline-block; height: 100%; vertical-align: middle; 就是兼容的了。
子元素浮動(dòng),父元素不能自動(dòng)適應(yīng)高度
FF IE7下可以在父元素定義overflow: auto; IE6加入 zoom: 1; 這個(gè)觸發(fā)IE的.layout?;蛟诟?dòng)元素后加入在浮動(dòng)層后面加入。
IE,FF下子元素的上下外邊界問題(定義寬度)
IE6:子元素的上邊距和父元素的上內(nèi)邊距疊加。FF:子元素上邊距顯示在父元素上方。解決方法:在父元素增加 overflow:hidden;或給父元素增加邊框或內(nèi)邊距。
IE,FF下子元素的上下外邊界問題(定義高度)
IE6:子元素上邊距顯示正常。FF:子元素的上邊距和父元素的上內(nèi)邊距相加。解決方法:1、給父元素定義內(nèi)邊距。2、父元素設(shè)置邊框,子元素定義上外邊距。3、父元素定義overflow: hidden;,子元素定義上外邊距。
IE,FF高度自適應(yīng)問題(最小高度)
在IE6下子元素的高度能夠撐開父元素,但FF,IE7下不可以。解決辦法:父元素定義min-height:高度值; height:auto !important; height:高度值; (要注意先后順序不能錯(cuò))