翻修一個古老網頁,在IE6下撞鬼: 以jQuery隱藏<TR>後,整列<TR>元素都消失了,唯獨其中<SELECT>屹立不搖!

將有問題的HTML擷取出來,用刪去法一一排除嫌犯,花了半小時才抓出原因,看來是IE6的Bug。但這年頭,執意使用IE6的人,不論是格式錯亂版面不同、程式當掉還是發現臭蟲,都像硬選了蒼蝿滿天的路邊攤吃冰,隔天烙賽就算拉到兩眼金星,也不會有人寄予同情。只會換來一句: 老師有講,你有沒有在聽?? IE6它是害人精,趕快丟到天王星... (氣到我都忍不住開始Rap了)

遇到這種鳥事,只能化悲憤為力量,PO文記錄之,萬一有無法擺脫IE6的朋友也誤踏此陷阱,可以來此求解兼取暖。

我把重現Bug的程序縮到最精簡:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>WTF IE6 SELECT</title>
</head>
<body>
    <input type="button" id="b" value="Hide" 
    onclick="document.getElementById('a').style.display = 'none'"/>
    <table>
        <colgroup>
            <col width="200" />
        </colgroup>
        <tr id="a" style='background-color: Yellow'>
            <td style='border: 1px solid blue'>
                TEXT
                <select style="margin-left: 4px">
                    <option value="AAA">AAA</option>
                </select>
            </td>
        </tr>
    </table>
</body>
</html>

要避免以上問題,不要用<colgroup>就可以囉!

唉~ 網頁要相容IE6,好像養到忤逆不孝子,三天兩頭被他氣到爆血管,卻又不能把他活活掐死(雖然超想),各位Web Developer們自求多福吧!


Comments

# by 大牛

遇到同樣的情況, 移除colgroup還是無效, 最後處理方法是將控件也設為 hide一併隱藏, 才解決問題。

# by Jeffrey

to 大牛,(取暖取暖) 聽起來很有趣,不知有沒有辦法包成一個Bug Reproducer丟出來大家研究一下?

Post a comment