Menu.CssClass プロパティに設定した CSS クラス の Safari における有効性

Question

Windows 版でしかチェックしていませんが、Safari で、System.Web.UI.WebControls.Menu
コントロールの CssClass プロパティに設定した CSS クラスが無視されるという問題が見
つかりました。

ソース（下記参照）を見てみると、IE, Firefox, Opera と Safari とではまったく異なっ
ており、Safari では設定した CSS クラス "navitop_new" はどこかに消えてしまったよう
です。

皆さんにも同様な経験はおありでしょうか？

 

IE, Firefox, Opera の場合のソース

 

<table id="ctl00_menuTop" class="navitop_new ctl00_menuTop_2" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td onmouseover="Menu_HoverRoot(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="トップページ" id="ctl00_menuTopn0">
      <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td style="white-space:nowrap;">
            <a class="ctl00_menuTop_1" href="/Default.aspx">トップ</a>
          </td>
        </tr>
      </table>
    </td>
　　・・・以下省略・・・

Safari 3.1.1 (Windows 版）の場合のソース

 

<div id="ctl00_menuTop">
  <span title="トップページ"><a class="ctl00_menuTop_1" href="/Default.aspx">トップ</a></span>
  ・・・以下省略・・・

Answer 1

レスがないということは、自分だけに特有の現象なのかも知れませんね。

 

以下にテストのためのページを作りましたので、よろしければアクセス
していただいて、Safari と IE7 その他で違いがあるか確認いただける
と幸いです。

 

http://www.surfer.dev-asp.net/MenuTest.aspx

 

もし、違いがあるのは当たり前の話で、話題にするようなことではない
ということでしたら失礼しました。

Answer 2

出力された HTML を見ると、 IE 等のほうはダイナミックなメニューで、 Safari のほうは静的なメニューのようです。
ひょっとすると、 次のフィードバックに上がってる件かもしれません。

 

FeedbackID=102615

Menu control: treat Safari as uplevel browser!

 

これによると、 違いが出る原因は、 IE 等は "uplevel browser" に分類されていてダイナミックなメニューを出すようにしているが、 Safari は "downlevel browser" に分類されていて静的なメニューが出るようになっているようです。
そして、 Safari を "uplevel browser" として扱うことは、 互換性の問題に影響が出そうだから、 Orcas ( Visual Studio 2008 ) では対応しない、 という回答のようです。

 

回避策としては、ニュースグループ  Microsoft Discussion Groups にて、 Page クラスの PreInit イベントで  "uplevel browser" であると誤魔化してやったらどうか、 という提案が出ています。

 

Menu Control That Works With Safari in ASP.net

 

Answer 3

biac さん、回答をありがとうございました。

 

CssClass が無視される以前に、ポップアウトのためのスクリプトが生成されない
という問題があったのですね。

 

自分の場合は、ポップアウトなし（MaximumDynamicDisplayLevels="0"）で、特定
のレベルのみ静的に表示させていたので気がつきませんでした。（それだと、コ
ードは違っていても、見かけの動作は IE, Firefox などと同じなので）

 

とりあえずは見栄えの問題だけ（CssClass が無視される問題だけ）なので、css
で対応しましたが、連絡いただいた対処方法も試してみます。

Answer 4

SurferOnWww さんからの引用

連絡いただいた対処方法も試してみます。

 

先の試験用のページのメニューに子メニュー/孫メニューを加えてみました。

 

http://www.surfer.dev-asp.net/MenuTest2.aspx

 

IE, Firefox は子メニュー/孫メニューがポップアップされ、CssClass も
有効になりますが、やはり Safari ではダメです。

 

次に、biac さんから連絡いただいた解決策を試してみました。

 

まず、Safari の場合の HTTP リクエストの中の User-Agent ヘッダーを調
べると、

 

Mozilla/5.0 (Windows; U; Windows NT 6.0; ja-JP) AppleWebKit/525.18 (KHTML, like Gecko) Version/3.1.1 Safari/525.17

 

となっており、Safari という文字列があることが確認できました。そこで、
紹介いただいた Web ページに記載されているとおり、HTTP リクエストの中
の User-Agent ヘッダーに Safari という文字列があったら Page.ClientTarge
プロパティを uplevel に設定するようにしてみました。

 

http://www.surfer.dev-asp.net/MenuTest3.aspx

 

今度は Safari でも、子メニュー/孫メニューがポップアップされ、CssClass
も有効になりました。

 

有用な情報をありがとうございました。＞ biac さん

 

ただ、今回の問題は見栄え（CssClass が無視される）だけですし、この解決策
を適用すると他の部分で互換性の問題が出る恐れもありますので（問題の部分
は MasterPage にあり、全ページに影響します）、css を変更することを最終
的な解決策としました。