平時有可能用到的一些css技巧
網站開發人員,在開發過程中,總是會遇到許多莫名其妙的BUG,其中,以IE6不兼容的問題據多。我們有什么辦法能夠讓寫的網站樣式全兼容呢?這就需要很多css技巧了,下面是淮安互聯網站建設公司總結的一些css技巧,相信對大家能夠有點幫助。
需要圖片在層中是垂直居中
當需要圖片在層中是垂直居中,可以圖片定義vertical-align: middle;,再在圖片左側加入,定義樣式display: inline-block; height: 100%; vertical-align: middle; 就是兼容的了。
子元素浮動,父元素不能自動適應高度
FF IE7下可以在父元素定義overflow: auto; IE6加入 zoom: 1; 這個觸發IE的.layout。或在浮動元素后加入在浮動層后面加入。
IE下圖片產生的間隙
父元素直接包含,這個圖片下方會和父元素邊緣產生間隙。 解絕方法:1.在源代碼中讓和在同一行,因為那個間隙是由換行符產生的。2.給添加樣式 display:block;
IE下高度低于10像素時問題
塊元素最小高度為10px,當高度定義小于10px時,仍為10px; 解決方法:為此塊元素添加樣式 overflow:hidden; 或font-size: 0;
IE,FF下列表的li為浮動,則列表后面的元素不能換行的問題
解決方法:為這個ul定義合適的高或給包含這個ul 的父div定義合適的高。或加上
IE,FF下子元素的上下外邊界問題(不定義寬高)
子元素的上下外邊界和父元素上下外邊界疊加,并且顯示在父元素外面。解決方法:在父元素增加 overflow:hidden;或給父元素增加邊框或內邊距。
IE,FF下子元素的上下外邊界問題(定義寬度)
IE6:子元素的上邊距和父元素的上內邊距疊加。FF:子元素上邊距顯示在父元素上方。解決方法:在父元素增加 overflow:hidden;或給父元素增加邊框或內邊距。
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(this.width < 600 ? 600: true);
最大寬度,max-width: 300px; _width: expression(this.width > 600 ? 600: true);
子元素負邊距問題
IE6:超出父元素的部分會被父元素覆蓋。FF:分兩種情況當父元素有邊框或內邊距時,超出父元素的部分會覆蓋父元素;沒有時父元素擁有負邊距。解決方法:子元素定義相對定位。同時IE下子容器如果包含屬性position:relative,則父容器失效(IE bug),所以也需要設置父容器position:relative解決,IE6需要zoom:1來觸發haslayout
IE6詭異的奇數BUG
當父元素相對定位,子元素絕對定位時,倘若父元素的高或寬的數值是奇數,那么IE6下絕對位置會出錯。解決方法: 數值改成偶數,IE6是大俠,只要服從它。
轉載自淮安浪強網絡科技有限公司 http://haiis.com
上一篇:5個步驟分析網站權重相關的因素
下一篇:快速提升網站權重的三大步驟。