急急急急div css在不同瀏覽器不相容問題

時間 2022-09-22 02:21:02

1樓:手機使用者

注意:*+html 對ie7的hack 必須保證html頂部有如下宣告:

二、萬能 float 閉合(非常重要!) 可以用這個解決多個div對齊時的間距不對,

關於 clear float 的原理可參見 [how to clear floats without structural markup]

將以下**加入global css 中,給需要閉合的div加上 class=」clearfix」 即可,屢試不爽.

**:9 屬性選擇器(這個不能算是相容,是隱藏css的乙個bug)

p[id]{}div[id]{}

p[id]{}div[id]{}

這個對於ie6.0和ie6.0以下的版本都隱藏,ff和opera作用

屬性選擇器和子選擇器還是有區別的,子選擇器的範圍從形式來說縮小了,屬性選擇器的範圍比較大,如p[id]中,所有p標籤中有id的都是同樣式的.

10 ie捉迷藏的問題

當div應用複雜的時候每個欄中又有一些鏈結,div等這個時候容易發生捉迷藏的問題。

有些內容顯示不出來,當滑鼠選擇這個區域是發現內容確實在頁面。

解決辦法:對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構盡量簡單。

11 高度不適應

高度不適應是當內層物件的高度發生變化時外層高度不能自動進行調節,特別是當內層物件使用

margin 或paddign 時。例:

p物件中的內容

css:

#box

#box p

解決方法:在p物件上下各加2個空的div物件css**:.1或者為div加上border屬性。

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

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

select:empty /*safari可見*/

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

僅ie7識別

*+html

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

ie6及ie6以下識別

* html

這個地方要特別注意很多地主都寫了是ie6的hack其實ie5.x同樣可以識別這個hack。其它瀏覽器不識別。

html/**/ >body select

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

僅ie6不識別

select

這裡主要是通過css注釋分開乙個屬性與值,流釋在冒號前。

僅ie6與ie5不識別

select/**/

這裡與上面一句不同的是在選擇符與花括號之間多了乙個css注釋。

僅ie5不識別

select/*ie5不識別*/

這一句是在上一句中去掉了屬性區的注釋。只有ie5不識別

盒模型解決方法

selct ""; voice-family:inherit; width:正確寬度;}

盒模型的清除方法不是通過!important來處理的。這點要明確。

清除浮動

select:after

在firefox中,當子級都為浮動時,那麼父級的高度就無法完全的包住整個子級,那麼這時用這個清除浮動的hack來對父級做一次定義,那麼就可以解決這個問題 。

截字省略號

select

這個是在越出長度後會自行的截掉多出部分的文字,並以省略號結尾,很好的乙個技術。只是目前firefox並不支援。

只有opera識別

@media all and (min-width: 0px) }

針對opera瀏覽器做單獨的設定。

以上都是寫css中的一些hack,建議遵循正確的標籤巢狀(div ul li 巢狀結構關係),這樣可以減少你使用hack的頻率,不要進入理解誤區,並不是乙個頁面就需要很多的hack來保持多瀏覽器相容),很多情況下也許乙個hack都不用也可以讓瀏覽器工作得非常好,這些都是用來解決區域性的相容性問題,如果希望把相容性的內容也分離出來,不妨試一下下面的幾種過濾器。這些過濾器有的是寫在css中通過過濾器匯入特別的樣式,也有的是寫在html中的通過條件來鏈結或是匯入需要的補丁樣式。

ie5.x的過濾器,只有ie5.x可見

@media tty } @import 'ie5win.css'; /*";}

}/* */

ie5/mac的過濾器,一般用不著

/**//*/

@import "ie5mac.css";

/**/

下面是ie的條件注釋,個人覺得用條件注釋呼叫相應 hack是比較完美的多瀏覽器相容的解決辦法。把需要hack的地方單獨放到乙個檔案裡面,當瀏覽器版本符合的時候就可以呼叫那個被hack的樣式,這樣不僅使用起來非常方便,而且對於製作這個css本身來講,可以更嚴格的觀察到是否有必要使用hack,很多情況下,當我本人寫css如果把全部**包括hack都寫到乙個css檔案的時候的時候會很隨意,想怎麼hack就怎麼hack,而你獨立出來寫的時候,你就會不自覺的考慮是否有必要hack,是先hack css?還是先把主css裡面的東西調整到盡可能的不需要hack?

當你僅用很少的hack就讓很多瀏覽器很乖很聽話的時候,你是不是很有成就感呢?你知道怎麼選擇了吧~~呵呵

ie的if條件hack 自己可以靈活使用參看這篇ie條件注釋

only ie

所有的ie可識別

只有ie5.0可以識別

only ie 5.0+

ie5.0包換ie5.5都可以識別

僅ie6可識別

only ie 7/-

ie6以及ie6以下的ie5.x都可識別

only ie 7/-

僅ie7可識別

css 當中有許多的東西不不按照某些規律來的話,會讓你很心煩,雖然你可以通過很多的hack,很多的!important 來控制它,但是你會發現長此以往你會很不甘心,看看許多優秀的**,他們的css讓ie6,ie7,firefox,甚至safari,opera執行起來完美無缺是不是很羨慕?而他們看似複雜的模版下面使用的hack 少得可憐。

其實你要知道ie 和 firefox 並不不是那麼的不和諧,我們找到一定的方法,是完全可以讓他們和諧共處的。不要你認為發現了hack的辦法,你就掌握了一切,我們並不是hack的奴隸。

div ul li 的巢狀順序

今天只講乙個規則。就是的三角關係。我的經驗就是在最外面,裡面是,然後再是,當然裡面又可以巢狀什麼的,但是並不建議你巢狀很多東西。

當你符合這樣的規則的時候,那些倒霉的,不聽話的間隙就不會在裡面出現了,當你僅僅是裡面放,而不用的時候,你會發現你的間隙十分難控制,一般情況下,ie6和ie7會憑空多一些間距。但很多情況你來到下一行,間隙就沒了,但是前面的內容又空了很大一塊,出現這種情況雖然你可以改變ie的margin,然後調整firefox下面的padding,以便使得兩者顯示起來得效果很相似,但是你得css將變得臭長無比,你不得不多考慮更多可能出現這種問題補救措施,雖然你知道千篇一律來hack它們,但是你會煩得要命。

具體巢狀寫法

遵循上面得巢狀方式,

然後在css 裡面告訴 ul ,其中list-style:none是不讓標記的最前方顯示圓點或者數字等目錄型別的標記,因為ie和firefox顯示出來預設效果有些不一樣。因此這樣不需要做任何手腳,你的ie6、和ie7、firefox顯示出來的東西(外距,間距,高度,寬度)就幾乎沒什麼區別了,也許細心的你會在某乙個時刻發現

一、兩個象素的差別,但那已經很完美了,不需要你通過調整大片的css來控制它們的顯示了,你願意,你可以僅僅hack一兩個地方,而且通常這種hack可以適應各種地方,不需要你重複在不同的地方除錯不同的hack方式–減輕你的煩惱。你可以ul.class1, ul.

class2, ul.class3 的方式方便的整理出你要hack的地方,而統一hack。嘗試一下吧,再也不要亂巢狀了,雖然在div+css的方式下你幾乎可以想怎麼巢狀就怎麼巢狀,但是按照上面的規律你將輕鬆很多,從而事半功倍!

2樓:匿名使用者

各種瀏覽器之間的css標準都存在差異

1樓講的"css鉤子"我覺得是在常規方法以無法完成任務是才用的手段.

通常情況大概99%的css相容問題可以通過適當的css調整實現的.

大體思路:

想要了解個瀏覽器的css解釋區別,區別很多,但常見的也就十來個.

有針對性的對css和html進行設計,避免出現於差異的css.

必要時可加一些div框起來.

ie8 和ie6 有幾個常見的區別:

1. ie6 div內預設font-size:12px;

2. ie6 ie6預設clear:both注意這兩個可避免大範圍的布局混亂

總之不要著急慢慢積累,做一兩個專案後就得心應手了!

3樓:匿名使用者

主要是寫法不規範,如果都用對應**來寫的話還不把人整死。。我建議你把源**放出來。。我可以幫你看一下。。行了我就給你小改一下。。大改的話我不會幫你處理的。。。

4樓:

現在你就這對ie7程式設計就行

ie6早晚被淘汰的事

5樓:匿名使用者

div+css 裡面的很多屬性都是可能適應ie或者火狐相容性問題

請參考

裡面有很全的ie和火狐樣式屬性相容問題整理

6樓:匿名使用者

所謂的不瀏覽器相容性 一般用到的很少 只要**規範 一般都是相容的 你的頁面最後給開發之前先保證靜態頁面的瀏覽不錯位 這才能為以後有問題 更快解決 做好準備

div+css瀏覽器繼續不相容。請指點一下,謝謝

7樓:

這種情況我也復遇到製過,想要徹底因浮動而出現的相容問題只有這兩種辦法:

乙個就是有浮動時都加浮動float:left;,乙個就是css樣式表裡有浮動而這個類別樣式不要浮動時都要加clear:both; 清除浮動。

樓主上面的問題很簡單:

要麼給 .center1 至 .center5 類別樣式裡都加float:left;

要麼就是給 .center1 至 .center5 類別樣式裡都加clear:both;

上面兩種辦法都可以解決問題,樓主可以試試。

急急急急急急急將下面的四句話寫出兩種不同的意思

1.熱愛人民的 1 是熱愛人民的 形容詞加名詞 2 熱愛,人民的 祈使句 2.江蘇和浙江的部分地區特別富裕。1 江蘇和浙江的 兩個省的部分 部分地區特別富裕 2 江蘇 乙個整個省和浙江的部分地區 和浙江的部分地區特別富裕 3.炒肉絲。1 去 炒肉絲 2 炒 成 肉絲 而不是肉片 4.他去了半個小時。...

詩 和「詞」的不同之處,今天就要,急急急急

起源時間上,詩歌在先秦就已經出現,最早的詩集 詩經 而詞,起於隋唐 詞又稱 詩餘 所以是在詩歌基礎上發展起來的,有很多相似的地方。格律上,認為詞的格律不如詩歌嚴謹是不對的,恰恰相反。對詞而言,詞有定格,句有定數,字有定聲 乙個詞牌決定,它的格律也已經定下了,所以,寫詞叫填詞。詩歌中格律詩比較嚴謹,其...

字母在閉音節中的發音及音標!急!急!急!急!急

字母在閉音節中的發音及音標具體如下 a在開音節中讀 e 如 name plane。在閉音節中 如 bag dad。e在開音節中 i he these。在閉音節中 e bed let pen。i在開音節中 bike drive。在閉音節中 fish big drink。o在開音節中 u those c...

把花種在自己心裡 作文。要原創的 急急急急

我穿梭在喧鬧的城市街頭。面無表情的人們,呼嘯而去的車輛,都宛若匆匆流逝的時光,唯留一抹恍惚不定的痕跡以及逐漸淡蝕的聲音。是不是每一件事物都逃脫不了消失的命運呢?我無可奈何。為何正處花季的我是如此多愁善感而老氣橫秋?倏忽,我放慢了腳步,眼前的小花綻放得絢爛 三朵桃心形的花瓣向三個方向肆意擴充套件,深邃...

玩客瀏覽器為什麼打不開網頁遊戲急急急

用qq瀏覽器啊,它開啟網頁的速度一直都是同類中最快的,切換網頁的速度也是一樣,用了這麼長時間了,用它玩遊戲一直都是很順暢的,沒出現過什麼卡屏彈出的情況,每次也都是同時開啟好幾個號和同學們一起玩,有時還玩不同款的網頁遊戲,相容性很好的它保障了遊戲的執行,安裝包極小不僅為電腦節省空間,還使我們玩的網頁遊...