CSS常見問題修正方法,經典實用!

2021-06-26 08:19:49 字數 1673 閱讀 4407

橫向居中問題:設定左右外邊距為margin就可以了,比如margin:0 auto;需要注意的是一定要設定了寬度才可以,另一點需要注意的是,ie6一下版本該方法不能居中,可以給body設定:text-align:center;同時給容器設定text-align:left;

浮動清除:使用浮動屬性後會將沒有浮動的元素遮住(浮動後脫離文件流),這時候就需要清除浮動,一般有兩個方法:給浮動父元素設定overflow:hidden屬性。第二個方法:在浮動元素之後加乙個空元素,設定clear:both屬性。這個方法還有更好的寫法,比如.cf:before, .cf:after

.cf:after

.cf

超連結效果顯示不正確:這肯定是順序設定錯了,正確是順序是「lvha」,即link,visited,hover,active。高階用法,讓已訪問的鏈結滑鼠指示效果不一樣:a:visited:hover{}

css如何透明:加入如下屬性filter:alpha(opacity=0.7);opacity=0.7

ie6雙邊距問題:元素浮動同時設定了和浮動方向相同的margin,ie6就會出現該方向margin加倍的問題,修正方法:display:inline;注意這種問題只會出現在第乙個元素上面;

樓梯式bug:做導航條的時候,對li設定浮動,在ie7及以下瀏覽器li會逐漸向下,可以加上display:inline;屬性來解決。

ie6 li空行bug:多個li a垂直排列的時候,會出現很大的間距,就像是多了個空行,解決方法:一、display:inline;二、顯示設定乙個高度;三、給鏈結設定浮動,並清除浮動;

ie6小高度無法設定:設定個小高度的時候,ie6的高度總是在14畫素左右,解決方法

一、設定字型大小為0,行高和高度一樣,方法二、overflow:hidden;方法

三、加上zoom:0.08;

跨出邊距的bug:父元素已經設定了overflow:hidden;屬性,子元素設定了position:relative;並且子元素高度超過父元素,子元素超出部分,父元素不會隱藏,而是超出父元素,解決方法是給父元素加入position:relative屬性;

除了ie6,7,其他的瀏覽器對空div的寬度不能正確解析,表現症狀為不顯示該div,如果想要顯示,應該設定乙個高度

做導航的時候,對li進行浮動,如果不設定寬度,在ie6下面不能自適應,如何解決?

text-overflow屬性在chrome中不起作用?

ie6***bug,發生條件,前面有一元素浮動,並且內容撐開了容器,後面元素不浮動,裡面有超連結,並對超連結設定了hover樣式,這樣當滑鼠指上去時,前面元素超出後面元素高度的部分會隱藏,解決方案,1,清除浮動;2,給浮動元素設定position:relative屬性;3,給父元素設定高度,一般來說這個問題出現的機率比較低

如果z-index值不起作用,檢視父元素的z-index值是否夠高,因為z-index是不可以繼承的;

ie6視窗調整大小的bug:調整視窗大小的時候,說有相對定位的元素都不動,可以給body加入position:relative來解決

ie系列超連結虛線邊框解決方法,給元素新增οnclick=」this.blur()」,對於火狐,可以設定a

ie下方有間隙,可以設定display:block(谷歌瀏覽器,火狐瀏覽器有用),或者vertical-align:top,bottom,middle等(全部瀏覽器均有用)或者margin-bottom:-5px;(全部瀏覽器均有用)等等

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中,justify content space between 這個屬性如果最後一行元素沒有填滿,會...

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中,justify content space between 這個屬性如果最後一行元素沒有填滿,會...

CSS常見問題

viewport fit,它有三個可選值 contain 可視視窗完全包含網頁內容 cover 網頁內容完全覆蓋可視視窗 auto 同contain的作用.box box after在flex多行布局中,justify content space between 這個屬性如果最後一行元素沒有填滿,會...