如何才能將網頁做到IE與Firefox完全兼容?

Question

我在製作網頁時會用到css控制網站整體風格.

我的網頁在Firefox裡頭的字體大小是可以隨意放大縮小的,可是在ie中就不是這麼回事,不僅不能更動字體大小,且ie顯示出來的網頁有些與Firefox裡頭是完全不同.

各位大大,請問我該如何才能將網頁做到IE與Firefox完全兼容?就像YAHOO一樣,兩種瀏覽器顯示的網頁是沒有差異的.

Answer 1

個人看法，你眼前有兩條路：

1. 在駭 CSS (CSS Hack) 間打滾，自行開發 script 修正問題
2. 用 CSS2 標準語法，然後用後面人家開發的 script 補強

各有優缺，以下分別闡述：

第一種，先別討厭這個「駭」字，這需要設計師要很熟悉 CSS 在各家各種版本瀏覽器的臭蟲，並加以利用。

Google 搜尋： CSS hack, CSS bugs, CSS compatibility

好處：
1. 瀏覽器反應快。當然在加載修正的 Javascript / DOM Script 之前是很快的。
2. 有針對性。譬如你網頁用不到某種 CSS，就不用開發相對應的 Script 修正，Script 可以因此瘦身。

壞處：
1. CSS 表會膨脹。因為你需要一個基本的樣本語法，最符合 CSS 2.0 標準的，然後再根據瀏覽器種類版本累加上去。如果你不用一些對瀏覽器種類版本判斷描述的話，全部擠在一起當然很大。
2. 要針對每個瀏覽器種類版本特化。每個瀏覽器種類版本不同，作業系統平台不同，網頁顯示當然不會盡似。
3. 要開發 Javascript / DOM Script。好啦，CSS 不相容，Javascript 是不是比較平坦一點的道路？答案是：不是。 Javascript 也有版本支援的問題，還有瀏覽器對文件描述框架不同的問題。也有 Javascript 瀏覽器與版本標準間的相容表。至於是不是碰到難題就不做了？我個人覺得，如果所有瀏覽器種類版本問題太容易了,天下也就不需要這麼多網頁設計師，正因為懂得比較多才比較有競爭力。
4. 瀏覽器開發小組經過不斷的努力，有些臭蟲已經在新版中抓掉了。意味著針對某個廠牌某個特定版本瀏覽器的 CSS 已經表現不如預期。最明顯的例子是 IE 開發小組在他們的 IEBlog 公開告誡網站管理員不要再用那些駭 CSS 的技巧。不過老實說大家還是老神在在，就我所知台灣至少還有 60% 以上的 IE6 市佔率，而且 FF 的 web Developer + Firebug 早就搞定那些比較接近正式 CSS 2.0 的語法，只不過調調幾個設定，日子還是很好過的。

範例：

舉你現在看的這個問題頁來說的 CSS Hack:

#yhtw_masthead .mhsch form div {...;_position:relative;...}
#yhtw_masthead .mhsch form div a{_padding-top/**/:4px;_height/**/:1.2em;}
.ykpedit .calculation em {...;top:1px;*top:-2px;}


第二種，這種就比較無聊一點，只要你寫得出來 CSS 2.0 的語法，理論上 FF / IE5 / IE6 / IE7 都會看起來非常非常近似 (如果有人要硬挑說影子比較柔和什麼等等的問題，那就不保證了，正規 CSS 2.0 沒有所謂自動造影語法、透明半透明語法、捲軸語法)。見：

http://dean.edwards.name/IE7/

好處：
1. 只有寫一次 CSS 語法就可以支援四種瀏覽器，商業用途來說時效可不謂不大。
2. 支援未來的瀏覽器 (CSS 2.0 / 3.0)。因為瀏覽器本身開發只要越多人使用 CSS 2.0 標準，開發商就更願意補全 CSS 2.0 的功能。正所謂瀏覽器開發商宣稱「很悲哀的技術優勢」：標準早就訂在那裡，使用者沒有享受到，開發商做出來說這是他們的新功能，誇稱比其他瀏覽器好....。
3. CSS 檔案小。

壞處：
1. 開發者變笨了。開發部分都被搞定了，那所謂網站設計師只是所謂「進階使用者」；碰到那個包不支援或者出錯的情況不知道如何解決或者修正。
2. 額外 Script 檔案部分開銷變大。
3. 沒有針對性。不管有沒有用到的功能都修掉了，訪問網頁時就已經載入了垃圾。
4. 依賴性。等著人家支援新的瀏覽器種類與版本。
5. 可以使用某些瀏覽器專有的非標準特效，但是不要期待所有的瀏覽器或者版本都有，並做得一樣。

Answer 2

我在做網頁時候我不會用單一的網頁製作軟體您可以場是以跨軟體方式試試看!!

我都是用 Macromedia Dreamweaver 8 和 NVU 一起做的!!

也就是說如果我用Dreamweaver 8 製作 index.html 他有背景聲音可是用 Firefox 進去之後沒有了你可以再用 NVU 進去加入背景聲音的選項!!

畢竟 NVU 他是以Firefox來做的網頁設計軟體

http://www.moztw.org/nvu/ 繁體官方網站( 免費軟體 )

提共給你參考!!