Re: [-Fx-] 用firefox 3開yahoo首頁的小bug

[Hemiola ()]

※ 引述《gaelelw (Ψ)》之銘言：
: http://www.badongo.com/pic/3605792
: 知識+旁邊hot的小圖示出現兩次
: 用fx2看就正常
: fx 3.0 beta和rc都會這樣

Yahoo! 自己將網頁宣告為 HTML 4.0 strict，但網頁原始碼一堆不合 strict 的東西，
也不能怪各家瀏覽器要怎麼解讀了。

你可以開「頁面資訊」看看，Firefox 3.0 使用「標準依循模式」來繪製 Yahoo! 首頁。
問題是碰到裏面的錯誤怎麼辦…？

看看出錯的原始碼：
<li><em><i><a href=me/kp/*http://tw.knowledge.yahoo.com/>知識
<sup>+</sup></a></em></i></li>

(對不起畫面不夠長，在此截行)

<em><i>...</em></i> 錯誤了，</i> 應該放在 </em> 前面。
所以 Firefox 3.0 解讀到這裏時，「自做聰明」(?)地修正成：
<em><i><a href="me/kp/*http://tw.knowledge.yahoo.com/">知識
<sup>+</sup></a></i></em><i></i>
也就是多了一個 <i></i>在後頭。
你將「知識+ hot」那個地方反白後按右鍵選「檢視選取範圍原始碼」，
看到的就是這個結果。

而那個 <i>...</i> 在 Yahoo! 的 CSS 裏，就是設計來預留右邊空間，
用背景圖畫「HOT」字樣的。Firefox 在這裏解讀成兩個 <i></i>，
所以就畫出了兩個 HOT 了。

那要怎麼解決呢？最根本的方式，就是請 Yahoo!奇摩修改原始碼，
把 </i> 正確地放到 </em> 前面去。

不過要請 Yahoo! 奇摩改，我看是很難的。
你如果很介意，倒不如試試在 userContent.css 裏加規則，
把第二個 <i></i> 隱藏起來試試看。


--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 80.170.58.141
推 psion:真是專業！
推 eggimage:推專業
推 gaelelw:我也把yahoo丟去w3c測過 不過181個錯誤 懶得看= =
→ gaelelw:另外我opera看也不會顯示兩個
推 gaelelw:解決了          .info > li > em + i { display: none; }
→ Hemiola:opera不會顯示兩個，因為各家瀏覽器對不標準內容解讀不同