A website I'm working on (URL in the comments) has a problem with the menu. It looks OK in Chrome if the bottom property of #nav is set to 2px, but looks bad in FF and IE. If I set it to 3px, it looks OK in FF and IE, but bad in Chrome.
Why does this happen? How can I fix it?
对于 Chrome/safari 使用 hack
@media screen and (-webkit-min-device-pixel-ratio:0) {
#nav { bottom: 2px !important; }
}
会为你工作
Browser @media hacks 是一种解决方案，但是当您需要跨浏览器兼容性时，您应该使用 CSS 重置，因为所有浏览器都有其默认样式。这必须在所有自定义样式之前放入您的 style.css 文件中，或者在您自己的样式之前包含 cssreset.css 文件。
您可以在这里找到 css 重置：http: //meyerweb.com/eric/tools/css/reset/
您可以使用 jquery 进行浏览器检测并设置底部值。并将默认值保持为 3px。
if ($.browser.webkit) {
$("#nav").css('bottom','2px');
}