用div和css布局網頁怎樣才能滿足所有主流的瀏覽器

2022-02-07 00:37:04 字數 4108 閱讀 7170

1樓:天立方

據說用**要比視覺化的要準確--不絕對

還是要看寫**的本身。首先在寫div+css語句時就要實時注意遵守w3c規範標準。這樣寫出來的**就會規範適用於大部分瀏覽器。

但是即使這樣還是有一些微小的差別,在於哪兒呢就是ie+遨遊與火狐的核心是不一樣的。開發的公司與團隊與思想都不是一家,所以必有小小區別。這就需要你去發現,去實踐,去積累。

遇到並用的多了自然就知道解決的辦法了。這裡給你提乙個好的解決辦法就是 用 hack! 在網上你可以仔細檢視下具體ie核心與ff核心用 hack的方法。

一般個人部落格中寫的很具體。

有時間看些資料,給你推薦本好書,css黑皮書(精典)清華出的,現在第二版。 多看多實踐

luck。

2樓:海豚劇場

要滿足主流的瀏覽器就先弄清楚主流的瀏覽器是那些,現在主流瀏覽器是,ie9,火狐,谷歌這三種瀏覽器,其實div+css就已經可以滿足了這三種瀏覽器了

3樓:匿名使用者

何謂**要比視覺化?視覺化最後不也是**嘛。全部相容就是css少用最新的,少用maign和padding。

完全相容不可能,除非你的網頁結構十分簡單,否則ie和火狐肯定有細微差別。

4樓:濮靈寒

滿足所有主流瀏覽器看你怎麼說主流兩個字了

如果ie8以上 基本你不用css3就沒太大區別如果ie678 你就慢慢除錯吧~ ie6,ie7,ie8很多不同的相容問題

比如ie6不支援hover

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

5樓: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

6樓:

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學熟再說。

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

7樓:匿名使用者

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

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

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

8樓:隱技術

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

9樓:匿名使用者

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

10樓:ai嬌露

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

如何快速的解決css+div布局中,所有瀏覽器相容性問題 謝謝~

11樓:匿名使用者

在css裡邊寫各個不同瀏覽器布局的**,有個比較簡單的方法:

火狐:#banner div.a

ie7: *+html #banner div.aie6:

*html #banner div.a css樣式需要在不同的瀏覽器裡邊除錯以後才知道具體數值,但個人認為這是最好用的方法。

12樓:匿名使用者

好像快速沒有什麼好辦法,就是要你懂得css全面一點,還有就是你要在多個瀏覽器下進行測試。這樣才能達到好的效果。

如何把ul標記放在div上面,用css

您好 首先ul元素必須放在div中。如果像你說的li元素文字在div下面了。可以用絕對定位方法,改變ul的位置。只需設定position屬性為absolute即可,然後設定top和left值。還可以設定ul的z index樣式為100.這樣他就會在div上面而不會被div遮擋了。ul div是指選擇...

怎樣用css實現網頁背景顏色漸變

css3 漸變 gradients 可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。css3 定義了兩種型別的漸變 gradients 線性漸變 linear gradients 向下 向上 向左 向右 對角方向與徑向漸變 radial gradients 由它們的中心定義 線性漸變 3.1 從上...

響應式表單怎麼用html和css寫

自己就可以寫。如果是html5.你可以試試 media,根據螢幕大小修改css。也可以使用width的百分制,高度可以auto,也可以固定。例如 自己在頁面裡面試試。網上有很多現有的框架,但是最火的是bootstrap 用bootstrap 響應式布局是怎麼回事 只能用html5跟css3寫 嗎 能...