ie8 出現的display table寬度問題

2021-09-06 08:43:53 字數 2050 閱讀 2390

現在我們在做網頁的時刻總是要考慮一些瀏覽器之間的相容問題。近期在做乙個簡訊平台的專案。在專案的開發過程中讓我遇到了一件頭痛的事情就是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;

IE8的不能顯示

今天遇到了乙個問題,不是獲取不到值,也不是頁面布局出問題,而是ie8瀏覽器上不能賦值的問題,咔咔的,弄了好久,最後發現,ie8不識別 custlevel text custlevel 這種型別,我不知道你們的是不是如果是的話,就用我下面的解決方法,document.getelementbyid us...

關於ie6出現的問題的原因歸結

關於ie6出現的問題主要可以歸結為以下幾種情況把。當然還存在各種原因,bug的情況也還有各種各樣,我只是小結一下我自己經常遇到,比較有代表性的問題。會持續的更新。1。瀏覽器本身存在的缺陷 比如 1 左浮動的元素,加了左補白 margin left 就會出現雙倍邊距的問題。我們可以盡量去避免這些問題,...

ie8與ie9的區別

最近將ie8公升級到了ie9,效能和支援html5和css3方面就不多說了,網上都能查到,就是發表一下個人使用的感受 1.ie9 最後乙個tab可以刪除並且關閉整個ie 改進 2.ie9 可以將新建的tab拖出來當成乙個新的ie頁面使用 改進 4.ie9 command bar自動顯示一行,並且顯示...