解決IE6 IE7 IE8樣式不相容問題

ie6裡div錯位的問題

採用」float：left「的div在ie8、ie7、都沒問題，ie6下卻向下移動，出現空白。這是因為，ie6採用的核心預設把div之間的距離增加了3~5個px，所以，試試是將下移的div的style裡增加"margin-left:-5px;"或者更小。

解決ie7、ie8樣式不相容問題

方法一、要在頁面中加入如下http meta-tag:

只要ie8一讀到這個標籤，它就會自動啟動ie7相容模式，保證頁面完整展示。

方法二、針對整個**，在iis中加入如下描述符就可以有相同的效果，當然這麼做範圍更廣。

<?xml version="1.0" encoding="utf-8"?>

解決ie6、ie7、ie8樣式不相容問題

現在我們在做網頁的時刻總是要考慮一些瀏覽器之間的相容問題。近期在做乙個簡訊平台的專案。在專案的開發過程中讓我遇到了一件頭痛的事情就是ie7與ie8不相容。後面想了許多辦法得以解決。現共享如下：

code:

解決firefox ie6 ie7的css樣式相容問題

做主題最麻煩的就是css樣式相容問題，由於各瀏覽器對ccs的不同解釋，造成本來ie7可正常顯示，但到了firefox 、ie6等其它瀏覽器上，卻出現錯位、下沉等問題，只得在firefox 、ie6 、ie7之間不停的切換除錯，汗…最近又有兩款瀏覽器加入googlechrome和ie8,某個瀏覽器一統天下看來是沒希望了，只能盡量克服相容問題。找到一篇解決相容問題的文章，還是很有效的。

1 針對firefox ie6 ie7的css樣式

現在大部分都是用!important來hack，對於ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！找到乙個針對ie7不錯的hack方式就是使用「*+html」，現在用ie7瀏覽一下，應該沒有問題了現在寫乙個css可以這樣：

#1 /* moz */

* html #1 /* ie6 */

*+html #1 /* ie7 */

那麼在firefox下字型顏色顯示為#333，ie6下字型顏色顯示為#666，ie7下字型顏色顯示為#999。

2 css布局中的居中問題

主要的樣式定義如下：

body

#center

說明：首先在父級元素定義text-align: center;這個的意思就是在父級元素內的內容居中；對於ie這樣設定就已經可以了。

但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上「margin-right: auto;margin-left: auto; 」

需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在乙個div裡，你可以依次拆出多個div，只要在每個拆出的div裡定義margin-right: auto;margin-left: auto; 就可以了。

3 盒模型不同解釋.

#box

這裡細說一下block,inline兩個元素,block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);inline元素的特點是:和其他元素在同一行上,…不可控制(內嵌元素);

#boxhtml>body #box

6 頁面的最小寬度

min-width是個非常方便的css命令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但ie不認得這個，而它實際上把 width當做最小寬度來使。為了讓這一命令在ie上也能用，可以把乙個放到標籤下，然後為div指定乙個類：

然後css這樣設計：

#container

#left

#rightdiv[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都能識別*;標準瀏覽器(如ff)不能識別*；

ie6能識別*，但不能識別 !important,

ie7能識別*，也能識別!important;

ff不能識別*，但能識別!important;

解決IE6 IE7 IE8樣式不相容問題

IE6 IE7 IE8共存方法

解決IE6，IE7，IE8換行顯示問題

IE6 IE7 IE8之IE多版本共存的幾種方法

解決IE6 IE7 IE8樣式不相容問題

IE6 IE7 IE8共存方法

解決IE6，IE7，IE8換行顯示問題

IE6 IE7 IE8之IE多版本共存的幾種方法

相關推薦