魚乾的筆記本: CSS Hover在ie下無法顯示

星期三, 6月 25, 2008

CSS Hover在ie下無法顯示

在css裡設定hover在ie下總是無法正常顯示

外掛做法
這裡提供了csshover.htc可以解決
主要的做法是在css裡，遇到hover改成用mouseover等改寫
1. 下載csshover.htc
  Version 1.42.060206 (:hover and :active) download
2. 設定path
  path: 就先放在同一資料夾吧
3. 程式碼
  (1)在CSS裡
  已產生的dom可直接在css裡下
```
body{
  behavior:url(csshover.htc)
}
```
  (2)在JS裡
  動態產生的dom，因為放在css裡的已執行過，所以之後才產生的html tag似乎不會被改變，因此要javascript再跑一次
```
if (document.all && /MSIE (5\.5|6)/.test(navigator.userAgent) 
  &&  document.styleSheets 
  && document.styleSheets[0] 
  && document.styleSheets[0].addRule)
{
  document.styleSheets[0].addRule('*', 'behavior:url(csshover.htc)');  //csshover.htc的路徑
}
```
備註：
動態再呼叫javascript跑csshover.htc似乎會造成程式花了很多時間改寫hover
有建議將hover指定詳細減少搜尋改寫hover的時間
#menu li:hover ul { //指定li hover 再指出ul下
...
}
指定html版本
其他方法
據說設為W3C 4.01, ie就會乖乖聽話了
在html檔裡，最前面加上以下字串
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```

Reference

Getting :hover to Work in IE7

4 則留言:

Jinliang 提到...: 在html tag前加下面這個就好了，不用jquery; 2012年6月19日凌晨12:11:00
Jinliang 提到...: 在html tag前加

就行了，不用jquery; 2012年6月19日凌晨12:12:00
Jinliang 提到...: 沒辦法顯示我的程式，請參考http://www.bernzilla.com/item.php?id=762; 2012年6月19日凌晨12:13:00
fishjerky 提到...: cool, 多謝指教; 2012年6月19日下午6:10:00

訂閱：張貼留言 (Atom)