作者Peruheru (還在想)
看板Web_Design
標題[問題] CSS選擇器 "子元素" 作用於IE7-9的問題
時間Wed Nov 5 14:26:13 2014
大家好
這個問題純粹是CSS的問題，所以我想應該是在這裡問吧?
是這樣的
維護的網頁使用CSS來完成隱藏某區塊，直到滑鼠移過去才顯示特殊的樣式的效果
原本的寫法是像這樣
...
.someClass a span {...(隱藏與設定顯示樣示)...}
.someClass a:hover span {...(改為顯示)...}
...
樣式的寫法本身沒有問題
但因為後來加上某個JS功能後
JS會自動在目前對象的span裡面加上span
造成版面混亂
我的解法是改成
.someClass a > span { ... }
這樣子就解決了上面遇到的問題
但後來有史用者(無誤)回報
用IE7開的話CSS都失效了，原本隱藏的都跑出來了
後來發現是我加上去的 > 符號造成
去掉後就恢復隱藏功能，只是版面又亂掉
只好另外用其他方式解決
後來我查wiki
http://tinyurl.com/nxtms2z
上面顯示
E > F 子元素 Trident 7.0
再查 Trident 7.0，發現他表示 IE 11.0.x
這表示在 IE11 之前都不支援 > 的子元素選擇器 ??
可是依照
http://kimblim.dk/css-tests/selectors/
IE7 應該有支援 > 的寫法才對阿?
那到底為什麼這個寫法會失效 orz
更神奇的是對方說連非模擬模式的原生 IE9 也一樣失效...
怎麼會這樣...
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 220.134.18.8
※ 文章網址: http://webptt.com/m.aspx?n=bbs/Web_Design/M.1415168777.A.823.html
※ 編輯: Peruheru (220.134.18.8), 11/05/2014 14:27:38
1F：推 leochen0818: IE 7 應該是支援">"的噢，可能是其他因素或設定造成 11/06 10:37
2F：→ leochen0818: 的，有原始碼會比較好找原因。 11/06 10:38
3F：推 Ammenze: 直覺認為是js做了什麼事情,推樓上,有原始碼比較好debug 11/06 12:06
加上去的JS其實是字體廠商提供的外字轉換的功能
因為網站跟資料庫編碼是Big5，有一大堆不能顯示的名字得經過轉換來顯示
沒有其他JS了，隱藏跟顯示功能完全只靠CSS達成
※ 編輯: Peruheru (220.134.18.8), 11/06/2014 16:31:45
4F：推 alog: ignore ie7 11/06 18:43
5F：→ alog: ie7並沒有支援 11/06 18:44
6F：→ alog: 我的做法是 視覺不影響到為主 排版還是盡量不靠> 11/06 18:44
7F：推 hit1205: IE7是支援的唷，不過如果開頭沒有<!DOCTYPE>就會不支援 11/07 05:55
網頁開頭是<!DOCTYPE HTML>
這樣應該...有符合條件吧
※ 編輯: Peruheru (220.134.18.8), 11/07/2014 12:03:32
8F：→ alog: 你的ie是打過patch的 11/07 23:12
9F：→ alog: CSS 2.1 Selector 完整支援在IE8開始之後的事 11/07 23:12