火狐瀏覽器 div 左對齊與ie相容辦法

2021-06-19 13:20:16 字數 1369 閱讀 6868

本文講解了firefox火狐瀏覽器與ie瀏覽器在html**編寫時的差異,程式設計師有進行開發除錯時,可按下面說到的html標籤進行除錯.

1.ul不同,ie下預設是margin留白,ff下預設是padding留白,所以要先用margin:0;padding:0;來實現相容。

2.給定高度後,當內容過多,真實高度大於給定高度時,兩者不同

還有呢?

在ff測試div+css的過程中發現不少問題,主要原因是**的不規範書寫。

1、居中問題

div裡的內容,ie預設為居中,而ff預設為左對齊。

使ff內容居中的方法是增加**margin:auto;

2、高度問題

設有兩橫行div排列,上面的div設定高度(height),如果div裡的實際內容大於所設高度,在ff中會出現兩個div重疊的現象;但在ie中, 下面的div會自動給上面的div讓出空間。所以為避免出現層的重疊,高度一定要控制恰當,或者乾脆不寫高度,讓他自動調節。

或者設定:overflow:hidden

3、clear:both;

拿footer為例,有時候如果上面使用 了float控制的n列的布局,那麼在用ff瀏覽時footer很有可能不老實,到處亂動——因為他還在受到浮動(float)的控制。如果想讓它老老實 實呆在頁面下方,在footer的div中寫入clear:both;就可以達到效果了!

4、浮動ie產生的雙倍距離

#box

5、重點講解:display:block,inline兩個元素 display(顯示)

display:block; //可以為內嵌元素模擬為塊元素

display:inline; //實現同一行排列的的效果

diplay:table; //for ff,模擬table的效果

display:block元素的特點是:

總是在新行上開始;

高度,行高以及頂和底邊距都可控制;

寬度預設是它的容器的100%,除非設定乙個寬度

, , , ,

6、ie與ff寬度和高度的問題

min -width是個非常方便的css命令,它可以指定元素最小也不能小於某個寬度,這樣就能保證排版一直正確。整體最窄770px,最寬1024px,也就 是說視窗小於770xp就出底部滾動條,如果大於1024px自動螢幕居中。ie不認得min-這個定義,但實際上它把正常的width和height當 作有min的情況來使。這樣,如果只用寬度和高度,正常的瀏覽器裡這兩個值就不會變,如果只用min-width和min-height的話,ie下面根 本等於沒有設定寬度和高度。

css這樣設計:

#container{

min-width: 600px;

width:expression(document.body

from:

IE瀏覽器DIV居中

編寫主題或模板是居中是個大問題,還有就是div中元素都浮動,自適應高度的問題 body 這樣就好了,但是這樣的話所有div中的文字都會居中,沒關係,我們可以在後面d的div中定義text align center 就好了。還有個問題就是乙個大div中包涵兩個div,但是都是float的。比如 cla...

關注ie瀏覽器對於iview admin相容性處理

解決方案 安裝 babel loader 作用 babel loader,用來處理es6語法,將其編譯為瀏覽器可以執行的js語法 1.安裝依賴 npm install d babel loader babel core babel preset env webpack 2.在vue.config.j...

IE瀏覽器div錯亂問題

這個問題屬於各瀏覽器的相容問題,有時候在其他瀏覽器中,html頁面布局都是正常顯示,唯獨ie瀏覽器的div塊布局錯亂了,可能是html檔案上面的報頭標準出現錯誤。就是一段報頭,告訴瀏覽器,你的文件以html格式遵循w3c標準xhtml1.0協議。說明 1.宣告位於文件中的最前面的位置,處於 標籤之前...