IE9 Bug-滑鼠移過導致高度增加

日前曾遇此蟲,爬文解決而未寫KB。今日同事再遇,腦中只餘殘存印象,戳力苦思蒐羅,方復拾回,嗔甚,為文誌之以杜後患。

網友Brian Richards對這個問題做了清楚的分析,也提交到MS Connect,其發生條件包含:

  • DIV設為overflow: auto且指定寬度
  • DIV內含TABLE,寬於DIV而產生水平捲軸
  • TD中元素使用CSS :hover進行樣式變化

以下範例可重現問題:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>IE9 Bug</title>
  <style>
    .lnk { cursor: pointer; color: white; }
    .lnk:hover { color: yellow; }
  </style>
</head>
<body>
  <div class="container" 
   style="overflow: auto; width: 200px; background-color: gray;">
    <table style="width: 300px">
      <tr><td><span class="lnk">Line1</span></td></tr>
      <tr><td><span class="lnk">Line2</span></td></tr>
      <tr><td><span class="lnk">Line3</span></td></tr>
    </table>
  </div>
  <div>Bottom of Page</div>
</body>
</html>

示範如下: 線上展示(需用IE9檢視)

解決方法: DIV加上CSS min-height: 0%即可避免。線上展示

PS: 此問題在IE10已修正,但IE9應該是不打算修了。IE Team心理應該也悶,Chrome、Firefox Team表示: 舊版是什麼? 能吃嗎?

歡迎推文分享:
Published 09 September 2013 10:19 PM 由 Jeffrey
Filed under: ,



意見

沒有意見

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<September 2013>
SunMonTueWedThuFriSat
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345
 
RSS
【工商服務】
OrcsWeb: Windows Server Hosting
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication