相容性處理 布局錯誤解決方法總結

2021-06-29 01:47:50 字數 3493 閱讀 1625

1.如果錯誤影響了整體布局,則可以逐個刪除div塊,知道刪除某個div塊後,顯示恢復正常,即可確定錯誤發生的位置

2.使用float屬性時,可以先新增border確定元素邊界,布局完成後再刪除

3.float元素的父元素,不能指定clear屬性

4.字型大小為奇數的邊框,邊框height或line-height應該設定為偶數

5,父奇》子奇 ,父偶》子偶

1.直接新增邊框

2.使用開發人員工具條中的輪廓選項

3.使用其中乙個bookmarklet來給不同元素加輪廓

4.嘗試修改幾個屬性,看看他們對bug有怎樣的影響,嘗試擴大bug的影響有助於找到bug導致原因。

例如:在ie中的空白邊比預想的大,嘗試增大空白邊margin-right的值,如果空白邊加倍,則遇上了ie的雙空白邊浮動bug

5.將position的屬性設定為relative

6.display屬性設定為inline(浮動元素)

7.設定高度或者寬度

1.div的垂直居中問題vertical-align:middle;

解決方法:將行距增加到和整個div一樣高,line-height:xx px;

缺點:不能換行

2.ie6怪異模式下padding與border算入行高

解決方法:加文件宣告

3.雙空白邊(兩倍畫素),有與float方向相同的margin時(例如:float:left和margin-left同時出現)

ie6下塊元素、左右浮動、設定margin時造成margin雙倍

解決方法:display:inline;

4.內部和模型超出父級時,父級撐大

解決方法:overflow:hidden

5.行標籤之間有一小段空白

解決方法:float:left

6.line-height有預設值

解決方法:給line-height設值

7,.浮動元素margin-bottom失效(margin-bottom和float不能同時作用在同一標籤上)

解決方法:設定高度,

或給父標籤設定padding-bottom代替子標籤,

或加乙個父元素的包裹元素,讓父元素浮動代替子元素浮動

8.img在塊元素中,底邊多出空白

解決方法:父級設定overflow:hidden

或img

或_margin:5px;

9.li之間會有間距

解決方法:float:left;

10.塊元素中有文字及右浮動的行元素,行元素換行

解決方法:將元素置於塊元素內的文字前

11.position下的left,bottom錯位

解決方法:為父級(relative層)設定寬高

或新增*zoom:1(zoom:1的作用是,觸發ie的hashayout,解決ie下的margin重疊,解決ie下的浮動bug)

12.子元素中設定了position,則父元素的overflow失效

解決方法:為父級設定relative

13.png半透明

解決方法:放棄使用或使用js

14.ie6下的圓角

解決方法:document.execommand("backgroundimagecache",false,true);

16.ie6不支援min-height屬性,但它卻認為height就是最小高度

解決方法:#id

.intro

解決方法:.div1.intro

20.外邊距疊加(當垂直外邊距相遇時,它們將只形成乙個外邊距,這個外邊距的大小是多個外邊距中最大的那個)

解決方法: 新增垂直邊框或內邊距  .

22。100%高度

解決方法:給元素設定100%高度,需要給她的父級設定明確高度

例如:給元素設定滿屏高度,需要將body和html設定為100%;

23.嚴實包裹:用乙個div(或其他容器)包裹乙個浮動元素,這個浮動元素會跑出div的框

解決方法:加不必要的清除元素,例如

或將父元素也設定為float的

或設定overflow

24.浮動層錯位:當內容超出外包容器時,在ie6中會忽視定義的with的值,寬度會隨內容的增加而增加

解決方法:overflow:hidden

或overflow:scroll

或設計時使用固定寬度

解決方法:在非浮動元素後加

或給容器加height:1%;

另一種***(來自精通css):在乙個設定了background但未設定寬度或高度的容器(假設class = "layout")中,乙個浮動元素後面跟著非浮動元素,在跟了清理元素,非浮動內容消失了

解決方法:layout避免使用background屬性

或給layout和浮動元素使用positionrelative

或對layout使用line-height屬性

或給layout使用固定寬度和高度

27.絕對定位的1畫素間距bug:當絕對定位元素的父元素高或寬為奇數時,bottom和height會產生錯誤

解決辦法:給父元素定義明確高、寬值

28.3畫素間距,ie6中當文字(或非浮動元素)跟在乙個浮動元素之後,文字和這個浮動元素之間會多出3畫素的間隙

解決方法:給非浮動元素新增float  

或給浮動元素新增fdisplay:inline和_margin-right:-3px;

29.相對定位中的絕對定位元素會發生偏移(本應該相對父元素,卻相對於外圍元素)

解決方法:給父元素加height:1%;或width:1%;

30.ie下的z-index的bug,因為在ie中定位元素的z-index是相對于父元素的,出現的錯誤表現

解決方法:給父元素定義z-index,有時候需要定義position:relative

31.如果用float:left把排列,中的會有錯誤表現

解決方法:給加上float

32.文字重複bug:在ie6中,一些隱藏元素(如「注釋」、「display:none」元素)被包含在浮動元素中,可能引發文字重複bug

解決方法:給浮動元素加display:inline

33.列表階梯bug:

在ie中呈現階梯狀

解決方法:給加上float:left或者display:inline

34.zoom:1能觸發ie的haslayout,解決ie下的外邊距疊加問題和浮動bug

35.垂直列表間隙:中有子元素時會產生間隙

解決方法:給加上float:left並且清除,或觸發的haslayout

給定義display:inline

給包含文字末尾加空格

36.ie6中的hover:ie6中只有a標籤能使用:hover

解決方法:onmouseover

37.ie6中調整視窗大小的bug

當把body居中,任何body中的相對定位元素都會固定不動

解決方法:給body定義position:relative

38:overflow:auto可以清除浮動,但ie6不支援:使用_display:inline-block

錯誤解決方法

一 1 錯誤 parsererror error tokenizing data.c error expected 2 fields in line 2,saw 10 2 sep none 3 error bad lines false 雖然讀取成功了,但是會刪掉很多列 實驗後,發現以上三種引數方法...

matlab mex setup錯誤解決方法

在做專案時,需要利用matlab來呼叫c 程式介面,並且將資料傳過來,折騰幾天,分享出來,互相幫助。眾所周知,matlab是基於c 的科學計算軟體,因此必然是可以與c 混合程式設計的,其中用到了mex 安裝是非常坑的,事實上網上,論壇上講的非常複雜,嘗試了很多種方法都不成功 自帶踩坑體質 這裡給出我...

解決相容性的方法

解決相容性的方法 1.清除浮動的相容性 清除浮動在低版本瀏覽器不可以使用,需要處理相容性加乙個 2.rgb 和rgba和opacity的相容性 rgb 和 opacity在ie低版本中不支援,需要加乙個filter alpha opacity 50 3.解決css3中的相容性 chrome 谷歌 的...