2010年10月25日 星期一

asp.net_Menu在IE8與Chrome的顯示問題

最近有一個案子規定做出來的系統要可以在ie、firefox及chrome上面跑,最初看到這條契約項目時就覺得到時候應該會有很多問題;上上星期終於解決一個棘手的問題,想說就來好好面對這些討厭的瀏覽器,沒想到不測試還好,一測發現上次很開心直接用asp.net的Menu物件對位置用好的選單在IE8跟Chrome根本就不會動......

問了同事,問了Google有以下結論:總之,微軟推出的Menu物件,其實整個寫法不符合規範,所以跑在現在推出號稱符合規範的瀏覽器上就會出現錯誤(所以微軟出的Menu並不能在自家瀏覽器IE8上面正常顯示(攤手))。

對於IE8的解決方案,大致分為三種(問了同事以後,又找到這篇整理文):
1. 強制IE8使用IE7的解析方式,使MENU正常。
2. 控制CSS的z-index屬性來使子選單強制顯示於上層。
3. 使用一個叫做CSS Friendly的元件,來使得Menu符合規範。

雖然看似第3個方法最一勞永逸,但因為我對於CSS實在是沒什麼研究,所以在測試第1個方法有點問題以後,最後我是採用同事告訴我的第二種方法,也就是去改變z-index屬性。

怎麼做勒?
1. 觀察你自己的Menu,可以找到一個DynamicMenuStyle項目。
2. 給上述項目一個CssClass名稱(比如說叫做DynamicMenu_S)。
3. 再CSS的設定檔增加
.DynamicMenu_S
{
z-index: 1000;
}
4. 重新整理網頁看看效果吧!

解決了IE8的問題,正想說會不會一並解決其他瀏覽器?很好,並沒有。

--------------------------------------------------------
下一個遇到的問題是Menu物件在Google的瀏覽器,也就是Chrome上面會有問題,很幸運的找到這篇

整個方法很簡單,但是我想如果沒有找到相關文章,應該永遠都不會知道該怎麼解決,步驟是:
1. 於VS專案內增加App_Browsers的資料夾(與App_Code同是Asp.net預留的特定資料夾)
2. 於該資料夾內新增一"Chrome.browser"的browser檔案(第一次新增這個@.@)
3. 刪除這檔案原有的內容。
4. 貼上以下程式碼。

<browsers>
<browser refID="safari1plus">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" />
</controlAdapters>
</browser>
</browsers>
5. 重新整理網頁看看效果。
----------------------------------------------------

接下來我就進行Firefox的測試,我不知道是火狐原本就不會有問題?還是做了上述兩件事情一併解決了應該要出現的問題?

總之,Menu又復活囉!可以在IE6、IE8、FireFox跟Chrome上面正常執行。

----------------------------------------------------
2012/12/24補充:

以上方式會在framework4.0產生錯誤:The browser or gateway element with ID 'safari1plus' cannot be found.
應修正為:
<browsers> <browser refID="mozilla"> <controlAdapters> <adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" /> </controlAdapters> </browser> </browsers>

沒有留言:

張貼留言