PTT數位生活區 / Web_Design

[閒聊] 怪IE之前先怪自己??

看板Web_Design作者 (EvenWu)時間15年前 (2010/07/06 12:00), 編輯推噓19(19推 0噓 27→)
留言46則, 24人參與, 最新討論串1/2 (看更多)
自從開放每週問問題之後 整理了一些問題的根源所在 學CSS很好很讚，但通常也跟著學如何幹譙IE 但是...問題真的出在IE嗎？IE must die????? 雖然IE有很多問題，但其他瀏覽器也是有問題的 寫法不對或太罕見，firefox也一樣會爆炸 當然，出最多問題的還是IE... 常常看到版面上提出的排版問題，也都是IE居多 處理方法大致如下： 1. 先使用自認為比較好的瀏覽器來檢視設計網頁 2. 打開IE觀察有沒有出包 3. 如果IE出包，就來hack 4. hack不過就上ptt問問題 5. 使用好心人士提供hack方法 但這樣各位應該會慢慢感覺到 怎麼那麼麻煩！而且CSS hack也超多 以下就個人經驗，講一下如何避免過多的hack 1. 認識DOCTYPE 可能有人覺得這怎麼可能會出錯？ 軟體不是都會自動加嗎？ 但我發現許多新手的問題就是出在這裡 常常是因為copy了一些覺得不錯的範例來用 深不知範例裡面也有錯 所以遇到問題時就非常的痛苦 常見問題 * 讓IE進入Standard mode的方法 * 如何避免IE進入Quirk mode 看過有人設計好網站之後 發現用IE看，整個版面都毀了 結果就用一大堆css hack去修正（真的是恐怖的一大堆） 然後其實根本就是讓IE進入quirk mode的關係 事倍功半阿！ 2. 認識HTML 除了一直強調的語意正確之外 以排版設計來說，更重要的是 知道哪些是 block, 哪些是 inline 如最常搞錯的 * img 因為方方的所以都以為是 block * input, select, textarea 等 form 內元素 也都誤認為是 block 結果呢，就亂下css 感覺視覺上有對就好了 這麼做只會讓css更亂更不容易維護 然後就更容易出包 正確的了解可以讓你少花很多功夫 3. 使用reset 先給一個有點老舊的資料 http://cl.ly/2aad300870fe9cf55005 可以看到各瀏覽器預設的字體大小不盡相同 還有，有的瀏覽器預設的間距、留白是用margin 但有些是用padding 加上瀏覽器也都可以自己設定基礎字體 http://cl.ly/a6ab144d0823ae876bfd 有時候只是你拿來測試的IE被動過設定而已 而不是IE的問題 但很多人這時候也會用css filter, css hack 來針對各瀏覽器一一設定，是否太累了？ 應該使用reset來解決這個問題 * http://meyerweb.com/eric/tools/css/reset/ * http://developer.yahoo.com/yui/reset/ 這兩套reset是最多人使用的 功用是把瀏覽器預設的style通通拿掉 當然，你就比較累了，每個元素都要自己定義其大小與樣式 可是所有的樣式都掌握在自己手裡 不會因為使用不同的瀏覽器，出現太意外的效果 4. ....應該還有吧 以後再寫 中午要吃飯了 總之不要常常光罵IE 有時候問題根本出在自己身上XDDDDD -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 114.32.77.168 ※ 編輯: evenwu 來自: 114.32.77.168 (07/06 12:04)
推
07/06 12:17, , 1F
推
07/06 12:17, 1F
推
07/06 13:03, , 2F
個人實力不足與罵IE是二回事~不標準就是該罵沒錯
07/06 13:03, 2F
→
07/06 13:07, , 3F
個人實力不足的情況其實居多XD
07/06 13:07, 3F
推
07/06 13:11, , 4F
推用心分享
07/06 13:11, 4F
推
07/06 14:23, , 5F
推分享
07/06 14:23, 5F
→
07/06 14:26, , 6F
Ken52039是CodeJob紅人 記憶猶新
07/06 14:26, 6F
→
07/06 15:30, , 7F
推~~
07/06 15:30, 7F
推
07/06 16:00, , 8F
IE6趕快死一死讓"實力不足"的人也能輕鬆做出標準網頁~
07/06 16:00, 8F
→
07/06 16:01, , 9F
這樣對網頁世界的發展比較好吧~
07/06 16:01, 9F
→
07/06 16:34, , 10F
其實喊了好幾年了也沒死阿XD
07/06 16:34, 10F
推
07/06 16:35, , 11F
推~用心~
07/06 16:35, 11F
→
07/06 16:55, , 12F
死不了吧，還聽過現在還有人在用98的
07/06 16:55, 12F
→
07/06 17:06, , 13F
親眼看過有人還在用98(舉手)
07/06 17:06, 13F
推
07/06 17:40, , 14F
IE6簡直跟約翰麥可連一樣很難死，連我原本也待過網路業
07/06 17:40, 14F
→
07/06 17:41, , 15F
的同事到現在還在用IE6...
07/06 17:41, 15F
推
07/06 17:41, , 16F
說的好，跨瀏覽器有一半的問題的確是html寫不好的關係
07/06 17:41, 16F
→
07/06 17:44, , 17F
就算ie6死了，未來HTML5跟CSS3也依樣會讓人跨到死的
07/06 17:44, 17F
→
07/06 19:24, , 18F
不幫ie6 hack css就可以讓ie6早點死啊
07/06 19:24, 18F
推
07/06 19:27, , 19F
我的遊戲 IE6可以跑 IE7 IE8反而有問題耶0.0>
07/06 19:27, 19F
→
07/06 22:15, , 20F
ie6 的 box model 是造成大量奇怪hack的基本元兇...
07/06 22:15, 20F
→
07/06 22:16, , 21F
還有ie6 對 css3 support 太差也是個痛點，很多基本的東西要
07/06 22:16, 21F
→
07/06 22:16, , 22F
繞很大一圈做，除此之外我倒是認同實力決定一切。XD
07/06 22:16, 22F
推
07/06 23:21, , 23F
我不久前才去某公司修了三台WIN98的電腦...傻眼`
07/06 23:21, 23F
推
07/07 07:55, , 24F
實力的確重要，但ie6還真TMD難搞...
07/07 07:55, 24F
推
07/07 15:20, , 25F
出問題的確常常根源在結構結構沒弄好
07/07 15:20, 25F
→
07/07 15:21, , 26F
結構好了，問題自然就很好解決
07/07 15:21, 26F
推
07/07 22:51, , 27F
真的得推 會的人花時間把已經會的事情整理給不會的人看
07/07 22:51, 27F
→
07/07 22:51, , 28F
非常有心!
07/07 22:51, 28F
→
07/07 22:52, , 29F
跟破爛的馬路一樣 一般人每天走每天幹譙 每天花一樣時間
07/07 22:52, 29F
→
07/07 22:53, , 30F
但天生車神(?)就會找出最佳路徑 每天都更快也更安全
07/07 22:53, 30F
→
07/07 22:54, , 31F
IE再破爛 它硬長在作業系統裡 對網路應用成長也是有貢獻XD
07/07 22:54, 31F
推
07/08 16:15, , 32F
ie就是拿來上網抓FF用的
07/08 16:15, 32F
推
07/08 16:50, , 33F
樓上我笑了~~
07/08 16:50, 33F
推
07/08 17:22, , 34F
IE是用來De IE的bug用的
07/08 17:22, 34F
推
07/08 17:35, , 35F
可惡如果我先看這篇 我就不用PO下面那篇問題了
07/08 17:35, 35F
推
07/11 17:23, , 36F
我對IE的痛是PNG24透明度的問題啊... box model調整寫法就
07/11 17:23, 36F
→
07/11 17:25, , 37F
OK了 CSS寫多了就知道怎麼避開那些常見的問題
07/11 17:25, 37F
→
07/11 17:26, , 38F
這兩篇寫得很好啊 應該M起來置底 XD
07/11 17:26, 38F
→
07/12 01:03, , 39F
再怎麼避，撞到opcity或css圓角之類的議題還是避無可避啊XD
07/12 01:03, 39F
→
07/12 01:03, , 40F
還有bgiframe等議題，這些根本是犯規的bug.. :p
07/12 01:03, 40F
→
07/12 01:05, , 41F
或者是多行文字垂直置中，conditional comment 能解決的都是
07/12 01:05, 41F
→
07/12 01:05, , 42F
小事，其他的就...
07/12 01:05, 42F
→
07/12 11:11, , 43F
這些事情可以另開一篇討論：如何斟酌瀏覽器差異？
07/12 11:11, 43F
推
07/12 13:01, , 44F
Tony說的避無可避問題就用下篇第四點"往上加"的概念去做 XD
07/12 13:01, 44F
→
07/14 10:29, , 45F
Tony說的四點用往上加還不夠，還要多添加網頁標籤跟JS
07/14 10:29, 45F
→
07/16 17:33, , 46F
我都是 IE OK fx都失敗 喝ㄏ
07/16 17:33, 46F
‣ 更多 evenwu 的文章
文章代碼(AID): #1CCgfv7r (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 evenwu 的文章
文章代碼(AID): #1CCgfv7r (Web_Design)