問了同事,問了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>
沒有留言:
張貼留言