我爸爸让我修复他们正在创建的现有 Web 应用程序的一些 CSS 浏览器兼容性问题,但我只知道 CSS 的基础知识。
我读到 IE 通常在这方面有最多的问题,大多数人建议首先为“符合标准”的浏览器(如 Firefox 和 Opera)提供 CSS,然后添加条件注释以指定各种样式表IE版本。这就是我真正打算做的。
但除了 IE 的小问题外,我在 Google Chrome 上也遇到了问题。如果我专门为 Google Chrome 创建另一个样式表是否可取?
图片应该是什么样子以及它在 Firefox 上的样子:
它在 Google Chrome 上的样子:
这是一些 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>
我认为我不能发布更多代码片段,因为我不是创建它的人。 有什么建议吗?我应该为谷歌浏览器创建一个单独的 CSS 吗?提前致谢! :)
最佳答案
我认为你不应该在 CSS 中为你的元素使用大写字母:
// Don't do this
#MenuMain-content .Menu A {}
// Do this instead
#MenuMain-content .Menu a {}
我不知道这是否是您问题的原因(以前从未见过这个问题),但这是一个很好的建议。此外,您的屏幕截图显示的内容很奇怪,Firefox 和 Chrome 根据 CSS 渲染往往表现相同。
关于html - 关于 CSS 浏览器兼容性问题的建议,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10170291/