瀏覽器相容性解決辦法

2022-09-05 09:45:03 字數 2683 閱讀 1101

div+css解決ie6,ie7,ie8,ff相容問題

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

浮動造成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學熟再說。

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

區別ie6、ie7、firefox

#tip 【說明】:ie7和ie6可讀「*」(公尺字型大小),ie6又可以讀「_」(底線),但是ie7卻無法讀取「_」,至於firefox(非ie瀏覽器)則完全無法辨識「*」和「_」,因此就可以透過這樣的差異性來區分ie6、ie7、firefox

區別ie6、ie7、firefox

【區別符號

【示例】:

#tip 【說明】:ie7和ie6可讀「*」(公尺字型大小),ie6又可以讀「_」(底線),但是ie7卻無法讀取「_」,至於firefox(非ie瀏覽器)則完全無法辨識「*」和「_」,因此就可以透過這樣的差異性來區分ie6、ie7、firefox

區別ie7、firefox

【區別符號】:「*」、「!important」

【示例】:

#tip 【說明】:因為firefox可以辨識「!important」但卻無法辨識「*」,而ie7則可以同時看懂「*」、「!

important」,因此可以兩個辨識符號來區隔ie7和firefox。

區別ie6、ie7

【區別符號】:「!important」

【示例】:

#tip 【說明】:因為ie7可讀取「!important;」但ie6卻不行,而css的讀取步驟是從上到下,因此ie6讀取時因無法辨識「!

important」而直接跳到下一行讀取css,所以背景色會呈現橘色。

區別ie6、firefox

【區別符號】:「_」

【示例】:

#tip 【說明】:因為ie6可以辨識「_」(底線),但是firefox卻不行,因此可以透過這樣的差異來區隔firefox和ie6,有效達成css hack。

遮蔽ie瀏覽器(ie下不顯示)

*:lang(zh) select /*ff,op可見*/

select:empty /*safari可見*/

這裡select是選擇符,根據情況更換。第二句是mac上safari瀏覽器獨有的。

僅ie7識別

* html

當面臨需要只針對ie7做樣式的時候就可以採用這個hack。

ie6及ie6以下識別

* html

這個地方要非凡注重很多地主都寫了是ie6的hack其實同樣可以識別這個hack。其它瀏覽器不識別。

html/**/ >body select

這句與上一句的作用相同。

常見瀏覽器相容性問題與解決技巧

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...

常見瀏覽器相容性問題與解決方案

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...

CSS多瀏覽器相容性問題及解決方案

相容性處理要點 1 doctype 影響 css 處理 2 ff 設定 padding 後,div 會增加 height 和 width,但 ie 不會,故需要用 important 多設乙個 height 和 width 3 ff 支援 important,ie 則忽略,可用 important ...