接獲報案,某個使用jQuery blockUI的網站,在呼叫$("#someDiv").block()時,遮罩沒放在<td>的正上方,跑到更上層容器的左上角。
問題只出在某個部門的數台機器,其他部門均操作正常,開F12開發者工具由IE相容模式列表檢查IE版本,正常與異常案例都是IE8(公司瀏覽版標準仍停留在IE8 orz)原本以為是blockUI計算遮罩位置時,因某些特定環境形成誤差。再深入調查,發現blockUI的原理是將待遮蔽容器的position設為relative,在容器中新増三個新元素<iframe>(避免老IE <select>打破z-index規則浮至最上層)、半透明遮罩div、訊息內容div,並將其設定為position: absolute,width: 100%,height: 100%且z-index > 1000,讓新元素佔滿容器全部面積並浮在容器上方,以形成遮蔽效果。為求單純,我將blockUI的遮罩元素直接寫死在HTML裡,做出能重現問題的範例:
第二個<tr>第二個<td>設定為position: relative並加入position: absolute <IFRAME>跟兩個<DIV>,理論左上角應與該<td>對齊,卻硬是跑到第一個<tr>第一個<td>的位置,也就是整個<table>的左上角。試著將<IFRAME>等移到第三個<tr>第四個<tr>,出現位置永遠都在<table>左上角。
至此,鐵證如山,問題鎖定在「問題IE未正確實現postion: relative及position: absolute規格」!IE8你在搞什麼鬼?隨手檢查IE版本,嚇得我屁滾尿流失了魂~~
是誰?為什麼到現在還讓機器跑IE8 RC1?誰還我數小時的青春?
【教訓】別由F12開發者工具的相容模式清單識別IE版本,請明確檢查IE版號!你永遠不知道戰場上會遇到什麼埋伏…