0

私の父は、作成中の既存の Web アプリケーションで CSS ブラウザーの互換性の問題を修正するように私に依頼しましたが、私は CSS の基本しか知りません。

通常、これに関して IE が最も多くの問題を抱えていることを読んだことがあります。ほとんどの人は、最初に Firefox や Opera などの「標準に準拠した」ブラウザ用の CSS を用意し、次にさまざまな IE バージョン用のスタイル シートを指定する条件付きコメントを追加するようアドバイスしています。そして、これは私が実際にやろうとしていることです。

しかし、IE のマイナーな問題の他に、Google Chrome でも問題が発生しました。特に Google Chrome 用に別のスタイル シートを作成することをお勧めしますか?

それがどのように見えるか、そして Firefox でどのように見えるかの画像:

例 1

Google Chrome では次のように表示されます。

例 2

CSS コードの一部を次に示します。

#MenuMain-content {
    background : transparent url(image/mainmenu.png) repeat-x center top;
    height : 27px;
    font-size : 11px;
}

#MenuMain-content .Menu {
    height : 25px;
    margin : 0 0 0 10px;
}

#MenuMain-content .Menu A {
    font : normal 11px Verdana;
    color : #bfd7ff;
    display : block;
    padding : 5px 7px 7px 7px;
}

#MenuMain-content .Menu A:hover {
    color : #ffffff;
    padding : 5px 7px 7px 7px;
}

#MenuMain-content .Menu .Selected {
    color : #ffffff;
}

#MenuMain-content .Menu .Selected:hover {
    color : #ffffff;
}

#MenuSub-content {
    background : url(image/submenu.png) no-repeat center top;
    height : 20px;
}

#MenuSub-content .Menu {
    height : 20px;
    margin-left : 15px;
}

#MenuSub-content .Menu A {
    color : #cccccc;
    height : 17px;
    display : inline-block;
    margin-top : -1px;
    padding : 2px 7px 0 7px;
}

#MenuSub-content .Menu A:hover {
    background-color : #999999;
    color : white;
    height : 16px;
    margin-top : -2px;
}

#MenuSub-content .Menu .Selected {
    background-color : #336699;
    color : white;
    height : 16px;
    margin-top : -2px;
    padding-top : 2px;
}

#MenuSub-content .Menu .Selected:hover {
    background-color : #204674;
    color : white;
    height : 16px;
}

そして、ここにHTMLコードの一部があります：

        <div id="MenuMain-content">
            <asp:Menu ID="MainMenu"
                        runat="server" 
                        MaximumDynamicDisplayLevels="0" 
                        Orientation="Horizontal" 
                        CssClass="Menu">
            <StaticSelectedStyle CssClass="Selected" />
            </asp:Menu>
        </div>                           

        <div id="MenuSub-content">
            <asp:Menu ID="SubMenu" 
                      runat="server" 
                      Orientation="Horizontal" 
                      CssClass="Menu">
                      <StaticSelectedStyle CssClass="Selected" />
            </asp:Menu>                  
        </div>

これを作成したのは私ではないので、これ以上コード スニペットを投稿できるとは思いません。何かアドバイス？Google Chrome 用に別の CSS を作成する必要がありますか? 前もって感謝します！:)

4

1 に答える 1

1

CSS の要素に大文字を使用するべきではないと思います。

// Don't do this
#MenuMain-content .Menu A {}

// Do this instead
#MenuMain-content .Menu a {}

これが問題の原因かどうかはわかりませんが (この問題はこれまで見たことがない)、良いアドバイスです。さらに、スクリーンショットが示すのはかなり奇妙です。Firefox と Chrome は、CSS レンダリングに従って同じように動作する傾向があります。

于 2012-04-16T07:46:46.707 に答える