Firefox 和 Chrome 之间的 CSS 问题答案

【问题标题】：CSS Problem between FireFox and ChromeFirefox 和 Chrome 之间的 CSS 问题
【发布时间】：2011-05-29 03:19:28
【问题描述】：

好的，这是我上一个问题的延续here。

我有一个 asp.net 菜单控件，样式为无序列表，在 chrome 和 firefox 中呈现略有不同。我确信这是由于我的 css 中的错误，而不是两个浏览器之间的怪癖。

我重新创建了菜单here。

这是描述问题的屏幕截图（顶部是 Chrome，底部是 FireFox）：

有什么想法吗？？

【问题讨论】：

你试过调整行高吗？
尝试调整“li”和“a”元素的行高...我可以让它在每个浏览器中分别使用不同的行高值看起来很好，但不能让它们很好地一起玩。 ..不想根据当前浏览器加载不同的 css 文件（也许现实是这在生产环境中是无法避免的？）...
在这种情况下我所做的是将一个带有浏览器和操作系统的类附加到正文。

标签： css firefox google-chrome

【解决方案1】：

检查元素上的填充。它们似乎都移动了几个像素。另外，你能给我们CSS吗？

【讨论】：

可以使用 Stephen 的 jsFiddle 链接获取 CSS
填充应该没问题...我认为您看到的变化是由我从单独的屏幕截图中裁剪的对齐图像引起的

【解决方案2】：

因为您提供的demo 在 IE 中看起来相当无望，所以我制作了新的 CSS 来配合您的 HTML，试图保持旧 CSS 的行为：

（在 IE7/8、Firefox、Chrome 中测试）

Live Demo

您的 HTML（略有更改：href="#"/class="selected"）：

<div class="header">
    <div class="headerInner">

        <div class="hideSkipLink">
         <div class="menu">   
          <ul>
              <li><a href="#">Test 1</a></li>
              <li><a href="#" class="selected">Test 2</a></li>
              <li><a href="#">Test 3</a></li>
            </ul>
         </div>
        </div>

    </div>
</div>

新的 CSS：

.header {
    font: 12px/18px Tahoma,arial,sans-serif;
    height: 33px;
    background: #666;
    border-bottom: 2px solid #a10000;
}
.header ul {
    margin: 0;
    padding: 8px 0 0 0;
    list-style: none;
    height: 33px
}
.header li {
    display: inline
}
.header li a {
    float: left;
    display: block;
    margin: 0 0 0 4px;
    padding: 3px 20px 0 20px;
    height: 22px;
    text-align: center;
    color: #fff;
    text-decoration: none
}
.header li a:hover {
    border: 1px solid #fff;
    border-bottom: none;
    padding: 2px 19px 0 19px;
}
.header li .selected, .header li a:active {
    font-weight: bold;
    color: #000;
    background: #fff;
    border: 2px solid #a10000 !important;
    border-bottom: none !important;
    padding: 3px 20px 0 20px !important;
}

【讨论】：

感谢您抽出宝贵的时间！我仍然有类似的问题......在 FireFox 中仍然可以正常工作，但现在，在 Chrome 中，菜单元素位于标题 div 的下方......
我看到你已经在所有 3 个浏览器中测试过这个......我必须在其他地方遇到另一个问题。我会进一步调查并在我弄清楚时回复。