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

[evenwu (EvenWu)]

自從開放每週問問題之後
整理了一些問題的根源所在

學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)
推 bill42362:推
推 rocky823:個人實力不足與罵IE是二回事~不標準就是該罵沒錯
→ evenwu:個人實力不足的情況其實居多XD
推 Ken52039:推用心分享
推 terrylchen:推分享
→ evenwu:Ken52039是CodeJob紅人 記憶猶新
→ nobody1:推~~
推 newlinuxer:IE6趕快死一死讓"實力不足"的人也能輕鬆做出標準網頁~
→ newlinuxer:這樣對網頁世界的發展比較好吧~
→ evenwu:其實喊了好幾年了也沒死阿XD
推 s861175:推~用心~
→ knives:死不了吧，還聽過現在還有人在用98的
→ tarcat:親眼看過有人還在用98(舉手)
推 terrylchen:IE6簡直跟約翰麥可連一樣很難死，連我原本也待過網路業
→ terrylchen:的同事到現在還在用IE6...
推 jojozyzy:說的好，跨瀏覽器有一半的問題的確是html寫不好的關係
→ jojozyzy:就算ie6死了，未來HTML5跟CSS3也依樣會讓人跨到死的
→ superpai:不幫ie6 hack css就可以讓ie6早點死啊
推 hirabbitt:我的遊戲 IE6可以跑 IE7 IE8反而有問題耶0.0>
→ TonyQ:ie6 的 box model 是造成大量奇怪hack的基本元兇...
→ TonyQ:還有ie6 對 css3 support 太差也是個痛點，很多基本的東西要
→ TonyQ:繞很大一圈做，除此之外我倒是認同實力決定一切。XD
推 Canboo:我不久前才去某公司修了三台WIN98的電腦...傻眼`
推 liaosankai:實力的確重要，但ie6還真TMD難搞...
推 cassatte:出問題的確常常根源在結構結構沒弄好
→ cassatte:結構好了，問題自然就很好解決
推 shonbn:真的得推 會的人花時間把已經會的事情整理給不會的人看
→ shonbn:非常有心!
→ shonbn:跟破爛的馬路一樣 一般人每天走每天幹譙 每天花一樣時間
→ shonbn:但天生車神(?)就會找出最佳路徑 每天都更快也更安全
→ shonbn:IE再破爛 它硬長在作業系統裡 對網路應用成長也是有貢獻XD
推 yanli2:ie就是拿來上網抓FF用的
推 shadowjohn:樓上我笑了~~
推 JYHuang:IE是用來De IE的bug用的
推 xxxx9659:可惡如果我先看這篇 我就不用PO下面那篇問題了
推 aceone:我對IE的痛是PNG24透明度的問題啊... box model調整寫法就
→ aceone:OK了 CSS寫多了就知道怎麼避開那些常見的問題
→ aceone:這兩篇寫得很好啊 應該M起來置底 XD
→ TonyQ:再怎麼避，撞到opcity或css圓角之類的議題還是避無可避啊XD
→ TonyQ:還有bgiframe等議題，這些根本是犯規的bug.. :p
→ TonyQ:或者是多行文字垂直置中，conditional comment 能解決的都是
→ TonyQ:小事，其他的就...
→ evenwu:這些事情可以另開一篇討論：如何斟酌瀏覽器差異？
推 aceone:Tony說的避無可避問題就用下篇第四點"往上加"的概念去做 XD
→ jojozyzy:Tony說的四點用往上加還不夠，還要多添加網頁標籤跟JS
→ cashspace:我都是 IE OK fx都失敗 喝ㄏ