CSS常用瀏覽器安全色調整

用CSS+DIV來寫網站代碼的好處顯而易見，這裡不多說了，但由於不同瀏覽器對CSS的解釋不統一 ，造成不同瀏覽器下頁面錯位的現象十分常見…… cs.Phontol.com頁面亂的原因是因為IE6認為一個DIV超寬了，所以把本應float;right的DIV擠了 下去。Phontol.com而如果設定為IE6下顯示正常的寬度，則在IE7和Firefox下看頁面就會少了一 塊一樣，也很彆扭…. cs.Phontol.com怎麼辦？用CSS HACK 來改寫CSS代碼 cs.Phontol.com cs.Phontol.com改寫前：xxx. yyy:{width:600px;} (當設為IE7和Firefox下顯示正常的600px時 ，IE6下會錯位，改為590px，則IE6下正常，IE7和Firefox下顯示不完美) cs.Phontol.com改寫後： xxx. yyy{width:600px;* width:600px;_ width:590px;} cs.Phontol.com（Firefox不認識*和_，而IE都認識*，IE7不支援_，IE6支援_） cs.Phontol.com順序千萬不要亂，因為當出現重複定義時，瀏覽器預設按最後一下渲染，所以一 定要先正常，再*，最後_。Phontol.com cs.Phontol.com這樣Firefox讀取時只看到了正常的定義，而IE都能看到第二個*的定義，於是忽 略第一個正常的定義，而IE中因為IE7不再支援_，所以按照第一個帶*號的執行，IE6支援_，所 以認為帶*後的也是重複定義，予以忽略，執行最後一個定義。Phontol.com cs.Phontol.com cs.Phontol.com有人喜歡用!important來進行CSS HACK，但我覺得!important寫起來太長了，不 如*和_簡單直觀。Phontol.com cs.Phontol.com cs.Phontol.com只要記住IE7=*，IE6=_，然後按照先Firefox後IE7，最後IE6的順序進行編寫， 一般就可以保證大部分使用者瀏覽正常了。Phontol.com 來源：收集整理於互連網 IE下很多地方可以省略一些層定義的浮動屬性,但是FF不行,必須每個個層都寫清楚,幾個DIV層水 平排列的時候,IE6中必須要加display:inline;,不然前端會出現雙倍間距,而FF中則加不加 display都顯示正常.這些都是由瀏覽器預設值的不同而引起的,你看到那些大站的布局在各瀏覽 器中都顯示正常,是因為他們把這些預設有區別的地方都定義清楚了. 下面的相容要點引自互連網 CSS對瀏覽器的相容性具有很高的要求，通常情況下IE和Firefox(簡稱FF)存在很大的解析差異， 這裡介紹一下相容要點。 常見的相容問題： 1.DOCTYPE影響CSS處理 2.FireFoxFirefox:div設定margin-left,margin-right為auto時已經置中,IE不行 3.FireFoxFirefox:body設定text-align時,div需要設定margin:auto(主要是margin-left,margin- right)方可置中 4.FireFoxFirefox:設定padding後,div會增加height和width,但IE不會,故需要用!important多設一 個height和width 5.FireFoxFirefox:支援!important,IE則忽略,可用!important為FireFoxFirefox特別設定樣式 6.div的垂直置中問題:vertical-align:middle;將行距增加到和整個DIV一樣高line- height:200px;然後插入文字，就垂直置中了。缺點是要控制內容不要換行 7.cursor:pointer可以同時在IEFireFoxFirefox中顯示遊標手指狀，hand僅IE可以 8.FireFoxFirefox:連結加邊框和背景色，需設定display:block,同時設定float:left保證不換行。 參照menubar,給a和menubar設定高度是為了避免底邊顯示錯位,若不設height,可以在menubar中 插入一個空格。 9.在mozillafirefox和IE中的BOX模型解釋不一致導致相差2px解決方案： div{margin:30px!important;margin:28px;} 注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的 瀏覽器可以識別。所以在IE下其實解釋成這樣： div{maring:30px;margin:28px} 重複定義的話按照最後一個來執行，所以不可以唯寫margin:XXpx!important; 10.IE5和IE6的BOX解釋不一致 IE5下 div{width:300px;margin:0 10px 0 10px;} div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其 他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如 下修改 div{width:300px !important;width/**/:340px;margin:0 10px 0 10px} 關於這個/**/是什麼我也不太明白，只知道IE5和firefox都支援但IE6不支援 11.ul標籤在Mozilla中預設是有padding值的,而在IE中只有margin有值所以先定義 ul{margin:0;padding:0;}就能解決大部分問題