2011-08-16 14 views
0

私はasp.net(4.0)メニューコントロールを使用しています。フィルタグラデーションを設定した後、ASP.NetサブメニューがIEに表示されません。

「メニューの点滅」の問題に対処するために、サブメニューの表示をnoneに設定しています。私が遭遇した問題は、グラデーションのフィルタを使用すると、サブサブメニュー(第3レベル)がIE(少なくともIE 7-8)に表示されないということです。

フィルタのグラジエントは何とかz-indexを使いこなしていると思います。なぜなら、IEの開発ツールを使ってasp.netで設定したz-indexを削除すると、インデックスが表示されますが、少なくとも表示されます)。私は、ページの読み込み時にCSSまたはJavaScriptを使用してZ-インデックスを手動で設定しようとしましたが、表示されないようです。

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
    <title></title> 
    <style type="text/css"> 

    .MenuFix ul li ul 
    { 
    display:none; 
    } 
    div.menu ul ul 
    { 
    background-color: #003775; 
    background: -webkit-gradient(linear, left top, left bottom, from(#003775), to(#001F42)); 
    background: -moz-linear-gradient(top, #003775, #001F42); 
    /*Either filter causes the problem*/ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#003775, endColorstr=#001F42); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#003775, endColorstr=#001F42)"; 
    position:absolute; 
    } 

    </style> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
     <div class="PageWrapper"> 
     <div class="header"> 
     <div class="MainMenu MenuFix"> 
     <asp:Menu ID="mnMainMenu" Orientation="Horizontal" CssClass="menu" runat="server" 
     StaticSubMenuIndent="16px" DynamicPopOutImageTextFormatString="" 
      StaticEnableDefaultPopOutImage="False"> 
     <DynamicMenuStyle /> 
     <Items> 
     <asp:MenuItem Text="Home" /> 
     <asp:MenuItem Text="Top Level Item 2"> 
       <asp:MenuItem Text="Sub Item" /> 
       <asp:MenuItem Text="Sub Menu" > 
        <asp:MenuItem Text="Not Displayed" /> 
        <asp:MenuItem Text="Not Displayed" />    
       </asp:MenuItem> 
       <asp:MenuItem Text="Sub Item" /> 
      </asp:MenuItem> 
      <asp:MenuItem Text="Top Level Item 3" /> 
     </Items> 
     <StaticMenuItemStyle HorizontalPadding="10px" VerticalPadding="5px" /> 
     </asp:Menu> 
     </div> 
    </div> 

    </div> 
    </form> 
    </body> 
    </html> 

ありがとう:

はここでCSSとマークアップです。

答えて

0

透明なPNGはIE 7のサポートされている機能です。DXImageTransformの呼び出しを取り除き、他のブラウザと同じようにCSSで処理できます。

DXImageTransformリファレンスを持つ唯一の理由は、IE 6をサポートすることです。これは通常のユーザーベースのわずかなパーセンテージ(2%以下、毎月)になっています。

詳細情報: http://www.atalasoft.com/cs/blogs/davidcilley/archive/2007/03/14/ie7-dximagetransform-and-png-transparency-problem.aspx

http://blogs.msdn.com/b/ie/archive/2005/04/26/412263.aspx

+0

私は私が削除した場合、それが正しく表示されますが、私は「何であるIE(の勾配なしになり、IEの勾配を表示するDXImageTransformを使用しています現在行っている)。それは(IE 8で)プレーンCSSを使用してグラデーションを表示することは可能ですか? – Jack

+0

@Jack:指定されたサイズの透明なPNGを使用します。 – NotMe

+0

ありがとうございますが、この場合、PNGを作成するためにサブメニューがどのようなサイズ(幅と高さの両方)であるかはわかりません(複数のサブメニューがあります)。私は開始と終了のグラデーションを使用することができたと思いますが(両方向で繰り返すことができます)、それは実際に私が探していたものではありません。 – Jack

関連する問題