如何控制div css適應不同的瀏覽器

時間 2021-05-05 19:11:16

1樓:go陌小潔

讓div+css相容所有瀏覽器:

1.doctype 影響 css 處理

2.ff: div 設定 margin-left, margin-right 為 auto 時已經居中, ie 不行

3.ff: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可居中

4.ff: 設定 padding 後, div 會增加 height 和 width, 但 ie 不會, 故需要用 !important 多設乙個 height 和 width

5.ff: 支援 !important, ie 則忽略, 可用 !important 為 ff 特別設定樣式

6.div 的垂直居中問題: vertical-align:

middle; 將行距增加到和整個div一樣高 line-height:200px; 然後插入文字,就垂直居中了。缺點是要控制內容不要換行

7.cursor: pointer 可以同時在 ie ff 中顯示游標手指狀, hand 僅 ie 可以

8.ff: 鏈結加邊框和背景色,需設定 display:

block, 同時設定 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設定高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入乙個空格。

9.在mozilla firefox和ie中的box模型解釋不一致導致相差2px解決方法: div注意這兩個margin的順序一定不能寫反, important這個屬性ie不能識別,但別的瀏覽器可以識別。

所以在ie下其實解釋成這樣: div重複定義的話按照最後乙個來執行,所以不可以只寫margin:xxpx!

important;

11.ul標籤在mozilla中預設是有padding值的,而在ie中只有margin有值所以先定義 ul

2樓:

1.ie8下相容問題,這個最好處理,轉化成ie7相容就可以。在頭部加如下一段**,然後只要在ie7下相容了,ie8下面也就相容了

2.flaot浮動造成ie6下面雙倍邊距問題,這個最常見,也最好處理,!important解決,比如

margin-left:10px !important;/*ie7,ie8,ff下是10px*/;

margin-left:5px;/*ie6下屬性寫的是5px,但在顯示出來的是10px

3.清除塊display,這個可以解決浮動造成的塊,造成塊後,當div背景填色或填**的時候,會出現背景斷開或差一小塊。這種相容出現的不太多,我做到現在,只遇到過兩次,方法是在出現相容的div的css中寫乙個display:

block,或其它屬性,中文什麼意思我不知道,我英語差,但能達到想要的效果,6 e" z+ e% |8 g# |

4.很多朋友div+css的時候,會出現,在ie的幾個瀏覽器下都好了,但是在ff出問題了,用!important又會把ie7做的不相容,很頭疼,在想,有沒有什麼方法只對ff下進行操做,我用過這個方法,感覺得是百試不爽,就是在屬性前面加符號如:

*、&,¥,#,@,—,+,加過符號的屬性只有ie的瀏覽器才識別,而ff不識別,方法如下(注意有符號的屬性和沒符號的屬性的順序)

height:100px;/*ff下顯示100的高*/

+height:120px;/*ie678下顯示120高*/

5.有時候,會在布局的時候,發現,有乙個div浮動了,接下來的乙個div本來是要在下面顯示的,結果跑上面去了,這種情況一般在ff下面會出現,解決的辦法就是清除一下浮動,在設定過浮動的那個div下面加乙個div,css面寫個clear:both;如下

6. 再就是居中問題,這個問題在新手身上很多,主要原因是對盒子模型不夠理解,沒熟記盒子模型,如果發現你的頁面沒有局中,我現在知道的,有這幾個原因:1.

乙個是沒盒子,就是body後的乙個大div把所有div裝起來的那個,你沒寫。2.就是你寫了,但是寬度沒用絕對寬度:

而是用乙個相對的寬度,想局中,必須用絕對寬度。-

7.擴充套件:如果我想在設計的時候,實現ie6,ie7,ff下出現三種不同的效果,比如ie6下背景紅色,ie7下藍色ff下綠色,這裡,我自己試過,可以,用相容的方法(注意順序,可以好好理解一下)。

7 l& t- o7 k- a1 i

background:red;/*ff裡顯示的紅色*/

+background:blue !important;/*ie7下面顯示的藍色*/

+background:green;/*ie6下面顯示的綠色*/

在這裡,我想說一下,雖然相容給你帶來很多鬱悶,讓人心煩,但同時,在你做多了後,你會發現,相容有時候會滿足你很多不好達到的效果,就像最後乙個,要做那種效果,不用相容的方法,那你就js去吧,js還得想想ff和ie下的不同,當然,js的相容,我也不會,我沒去研究過。以後的事,先把css+div學熟再說。

多做,做練,始終把盒子模型放在心中,才會熟練,才會運用自如,才會在做的時候,自然而然就知道**會有相容問題,直接在測試前就解決掉那些最常見的相容問題。

3樓:匿名使用者

1、在頁面開頭加w3c宣告,html**規範,關閉該關閉的標籤:

http://www.w3.org/1999/xhtml">2、css**定義完整(寬度、對齊方式),用相對定位,清除浮動,超出隱藏

3、在ie6、ff3等主流瀏覽器中反覆測試

4樓:隱技術

多除錯 **規範 就沒問題了 往往不相容現象都是**不規範造成的

5樓:匿名使用者

這些是需要反覆聯絡才能看到的!!

6樓:ai嬌露

這個寫多了就好了,就知道哪不對,網上有許多相容瀏覽器的文件,多看看@

div css如何調相容性

一是亂用了絕對定位 二是浮動沒清理 三是雙倍浮動邊bug 四是沒正確設定xhtml頭部宣告,盒模型尺寸在各瀏覽器下不一致 附上 才知道問題哈,一般是浮動問題 樓主有沒有設定百分比?或者是浮動錯誤 仔細檢查一下把 ie6 ie7 ff 與相容性有關的特性 css hack 所有瀏覽器 通用 heigh...

如何控制藻類,如何控制藻類? 50

橘說娛樂 1 物理抑藻技術 物理抑藻技術是指通過物理手段,從水中分離去除或抑制藻類的繁殖,從而達到控制藻類的目的,主要方法有以下幾種 1 過濾法。該方法將微網或過濾材料作為過濾器,過濾去除水體中的藻類。據報道,該方法可有效去除湖水中的甲藻,同時對cod tn tp及葉綠素a等也有一定程度的去除。2 ...

負面情緒如何控制,如何控制負面情緒?

這個一定有幫助的,這個答案會告訴你我們的心裡運作原理!自己是自己最好的心理醫生 化解壓力與情緒的11個偏方 1 運用言語和想象放鬆 通過想象,訓練思維 遊逛 如 藍天白雲下,我坐在平坦綠茵的草地上 我舒適地泡在浴缸裡,聽著優美的輕 在短時間內放鬆 休息,恢復精力,讓自己得到精神小憩,你會覺得安詳 寧...