2

いくつかのCSSスタイルが適用されたASP：MENUがあります。表で指定するオプションの1つは、各要素の「高さ」と「行の高さ」が15pxであることです。これはIEでは問題ないように見えますが、Chromeでは窮屈すぎます。さらに、要素に「border-bottom-style：dotted」を適用します。IEでは、この点線はテーブル要素の幅と同じです。Chromeでは、テキストと同じ幅です。

ChromeとIEの開発者ツールでページのコードを調べたところ、必要に応じてスタイルを受け取っています。表示が異なるのはなぜですか。Chromeがサイトをレンダリングする方法に固有の違いがあるだけですか。この場合、ブラウザによっては、他に試すことができるものがない限り、別のCSSスタイルシートを使用する必要があるかもしれません。

<asp:Menu ID="menuSubLeft" runat="server" DataSourceID="sitemap_submenu"     
MaximumDynamicDisplayLevels="1">
<StaticMenuStyle CssClass="clienthome_submenuMenu" />
<StaticMenuItemStyle CssClass="clienthome_submenuItemMenu" />
<StaticSelectedStyle CssClass="clienthome_submenuSelectedStyle" />
<StaticHoverStyle CssClass="clienthome_submenuHoverStyle" />
<DynamicMenuItemStyle CssClass="clienthome_dynamicMenu_Item" />
<DynamicHoverStyle CssClass="clienthome_submenuHoverStyle" />
<DynamicMenuStyle CssClass="dynamicMenu_style_left" />
<DynamicSelectedStyle CssClass="clienthome_submenuSelectedStyle" />
</asp:Menu>

.clienthome_submenuItemMenu
{
border-bottom:dotted 1px #5a57a6;
height:15px;
line-height:15px;
padding:2px 0px 2px 5px;
color:#5A57A6;
}



    <table id="ctl00_ctl00_globalContent_menuSubLeft" 
    class="clienthome_submenuMenu ctl00_ctl00_globalContent_menuSubLeft_5 ctl00_ctl00_globalContent_menuSubLeft_2" 
    cellpadding="0" 
    cellspacing="0" 
    border="0">
    <tr onmouseover="Menu_HoverStatic(this)" 
    onmouseout="Menu_Unhover(this)" 
    onkeyup="Menu_Key(this)" title="Allows client to change their account password" id="ctl00_ctl00_globalContent_menuSubLeftn0">
        <td>
            <table class="clienthome_submenuItemMenu ctl00_ctl00_globalContent_menuSubLeft_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td style="white-space:nowrap;width:100%;">
                        <a class="ctl00_ctl00_globalContent_menuSubLeft_1 clienthome_submenuItemMenu ctl00_ctl00_globalContent_menuSubLeft_3" href="/myprofile.aspx" style="border-style:none;font-size:1em;">My Profile</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

更新：CSSを何時間もいじって、サイト上の他のすべてのものをどこにも投げ出さなかった後、同僚は私に簡単な修正を指摘しました：私は次のコードをコードビハインドに追加しました：

protected void Page_PreInit(object sender, EventArgs e)
    {
        if (Page.Request.ServerVariables["http_user_agent"].ToLower().Contains("safari"))
        {
            Page.ClientTarget = "uplevel";
        }
    }
4

1 に答える 1

1

これはCSSPRECEDENCEのようなものです

6.4カスケード

スタイルシートには、作成者、ユーザー、ユーザーエージェントの3つの異なる起源があります。

  • 著者。作成者は、ドキュメント言語の規則に従って、ソースドキュメントのスタイルシートを指定します。たとえば、HTMLでは、スタイルシートをドキュメントに含めたり、外部にリンクしたりできます。
  • ユーザー：ユーザーは、特定のドキュメントのスタイル情報を指定できる場合があります。たとえば、ユーザーがスタイルシートを含むファイルを指定したり、ユーザーエージェントがユーザースタイルシートを生成する（または生成したかのように動作する）インターフェイスを提供したりできます。
  • ユーザーエージェント：準拠するユーザーエージェントは、デフォルトのスタイルシートを適用する必要があります（または適用したかのように動作します）。ユーザーエージェントのデフォルトのスタイルシートは、ドキュメント言語の一般的な表示の期待を満たす方法でドキュメント言語の要素を表示する必要があります（たとえば、ビジュアルブラウザの場合、HTMLのEM要素はイタリックフォントを使用して表示されます）。HTMLドキュメントの推奨されるデフォルトのスタイルシートについては、HTMLのサンプルスタイルシートを参照してください。

この場合は、ブロック要素とテーブル要素のパディングとマージンを削除するために、ベーススタイルをリセットするだけです。

于 2013-02-12T15:33:28.167 に答える