iT邦幫忙

0

IE7、IE8、IE9網頁DIV CSS不兼容

  • 分享至 

  • xImage

各位邦友好

小弟近期在建立CSS網頁,在【Windows 7-IE11瀏覽器、Firefox、Google Chrome】DIV CSS可以正常使用

Q1:
在XP環境的IE7、IE8,DIV CSS的選單就會變異
(ex.頂部邊框間距變大、選單按鈕無法使用、表格變形、logo圖片多了框線)

Q2:
若使用dns尾碼,所有IE版本的div css都會變形,Firefox、Google Chorme就是正常的

P.S 小弟有約略search到css hack的方式,是否有可以完全讓IE各版本識別Div CSS的方式呢?疑惑

看更多先前的討論...收起先前的討論...
fillano iT邦超人 1 級 ‧ 2015-05-25 09:35:51 檢舉
先看看這個排除問題的可能性:
http://www.dotblogs.com.tw/alantsai/archive/2013/06/05/105319.aspx
Jonas iT邦新手 4 級 ‧ 2015-05-25 10:21:12 檢舉
fillano你好

小弟有嘗試排除問題的可能性,只是,在加入了此篇作者所描述的
<meta http-equiv="x-ua-compatible" content="IE=edge">
圖片還是有外框的藍線問題仍然存在疑惑
77012904 iT邦新手 3 級 ‧ 2015-05-25 11:18:01 檢舉
CSS要每種瀏覽器看起來都一樣,那寫得會很累

撰寫方式就是你找的 CSS hack的方式.
fillano iT邦超人 1 級 ‧ 2015-05-25 14:45:06 檢舉
參考保哥的建議跟說明:
http://blog.miniasp.com/post/2012/03/14/Building-Website-is-not-that-easy-DOCTYPE-and-CSS-Reset-Normalize.aspx

除了x-ua-compatible,也確認一下doctype。另外,在所有的css之前,先使用normalize.css。

這些是讓你的style在所有瀏覽器一致的基本方法,其他的就要看你怎麼設定你的css rule。真的不得已,再來使用css hack。
fillano iT邦超人 1 級 ‧ 2015-05-25 14:46:08 檢舉
另外,我想你的圖片應該是包在<a>裡面吧?
Jonas iT邦新手 4 級 ‧ 2015-05-26 08:33:14 檢舉
fillano你好

小弟附上原始碼,
<td width="130" height="59"><div align="center"><a href="index.html"><img src="picture/logo.jpg" alt="" width="130" height="50" align="middle"></a></div></td>


小弟加上排除問題的可能性的原始碼,其中有一個分頁還是存在圖片有藍色外框的問題暈
外獅佬 iT邦大師 1 級 ‧ 2015-05-26 09:24:29 檢舉
加上一段CSS就行了吧
<style type="text/css">
a img {border:none;}
</style>
Jonas iT邦新手 4 級 ‧ 2015-05-26 11:49:14 檢舉
wiselou你好

痾‧還是不行,我有在CSS加入這一行,不過,還是謝謝您的協助謝謝
fillano iT邦超人 1 級 ‧ 2015-05-26 13:30:27 檢舉
請用開發工具來找問題試試看。例如使用IE11,可以把文件模式改成IE8,看看console有沒有出現什麼資訊。另外,滑鼠右鍵選單中出現的「檢查元素」會是你的好朋友。

不過,你給我的例子是html,不知道您的css長怎樣?selector與他指定的style,是有先後順序與權重的,有些問題沒看到css大概也無法釐清。

另外,我已經沒有IE8的環境可以做測試,大概也只能模擬XD
外獅佬 iT邦大師 1 級 ‧ 2015-05-26 13:44:20 檢舉
IETester
也可以用來測試網頁在ie 5.5~9的呈現狀況
Jonas iT邦新手 4 級 ‧ 2015-06-02 09:35:52 檢舉
感謝fillano、wiselou大大

小弟眼花了沒有確實把code加入,現在把code加入就正常顯示了!
不過,不保證後續還會不會有問題汗

到時候還請各位多多指教囉!謝謝
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

10
Ray
iT邦大神 1 級 ‧ 2015-05-25 11:40:57
最佳解答

沒看到你的原始程式碼, 光看結果, 無從查起.

現在只能瞎猜, 請試著在 HTML 裡面加上這幾段試試看:

&lt;pre class="c" name="code">&lt;!--[if lt IE 7]>
&lt;script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js">&lt;/script>
&lt;![endif]-->



&lt;pre class="c" name="code">&lt;!--[if lt IE 8]>
&lt;script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js">&lt;/script>
&lt;![endif]-->



&lt;pre class="c" name="code">&lt;!--[if lt IE 9]>
&lt;script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">&lt;/script>
&lt;![endif]-->

不過, IE 6,7,8 原本就屬於舊世代的瀏覽器, 跟新世代不相容是很正常的.

加上 XP 淘汰潮, 根據 W3Count 上個月的統計: IE 6+7+8+9+10 的市占率已經降到 10% 以下, 有必要為了那 10% 的人, 硬要去喬其他 90% 的 code 來配合他嗎? 不如直接放棄支援, 讓這些舊世代快速淘汰掉吧:

IE 8 連前 10 名排行榜都進不去:

看更多先前的回應...收起先前的回應...
James iT邦大師 6 級 ‧ 2015-05-25 13:27:14 檢舉

IE 預設會在內部網站啟用相容性檢視,而只有主機名稱沒有完整網域名稱的網站會被當成內部網站。
可以從相容性檢視設定取消勾選 「在相容性檢視下顯示內部網路網站」

weiclin iT邦高手 4 級 ‧ 2015-05-25 13:35:16 檢舉

xp的比例只會越來越低, 現在做新的網頁還要顧 xp 真的很不划算, 白費工

Ray iT邦大神 1 級 ‧ 2015-05-26 00:38:46 檢舉

weiclin提到:
xp的比例只會越來越低, 現在做新的網頁還要顧 xp 真的很不划算, 白費工

對啊, 所以報價要多一項懲罰性工資, 讓老闆知道, 多做 XP 相容性要多付很多錢...

Jonas iT邦新手 4 級 ‧ 2015-05-26 09:11:02 檢舉

raytracy大大你好

確實如您所描敘,XP的IE已經逐漸淘汰,甚至連Microsoft本身都跟它說再見了!

小弟會繼續找到問題,不過,部分的相容性問題,fillano大大的先看看這個排除問題的可能性解決了多數的問題(ex.圖片藍色外框、Table變異、置頂間變大、CSS選單寬度、高度變大)
還是有一個分頁有問題(ex.圖片藍色外框、Table變異、置頂間變大、CSS選單寬度、高度變大)

0
外獅佬
iT邦大師 1 級 ‧ 2015-05-26 10:30:32

saberaster提到:
是否有可以完全讓IE各版本識別Div CSS的方式呢?

每個IE版本出現時,CSS的版本就已經不太一樣,
再加上IE引擎本身自己又加上一些特殊的樣式,
基本上,沒有那種適合所有瀏覽器的東東。

就連最簡單的<select></select>
都常被抱怨....iOS的safari跟chrome長得不一樣

我要發表回答

立即登入回答