0

我爸爸让我在他们正在创建的现有 Web 应用程序上修复一些 CSS 浏览器兼容性问题，但我只知道 CSS 的基础知识。

我读过 IE 通常在这方面存在最多的问题，大多数人建议首先为“标准兼容”浏览器（如 Firefox 和 Opera）使用 CSS，然后添加条件注释以指定各种 IE 版本的样式表。这就是我真正打算做的事情。

但是除了IE的小问题，我在谷歌浏览器上也遇到了一个问题。如果我专门为 Google Chrome 创建另一个样式表是否可取？

它的外观以及在 Firefox 上的外观：

示例 1

它在谷歌浏览器上的样子：

示例 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 回答