html - chrome 和 firefox 之间的定位差异

Question

我进行了搜索，但没有找到与此相关的任何内容。这是 chrome 和 firefox 之间非常具体和奇怪的区别。如果有人能在代码中找到导致它的位置，我将非常感激。

我无法发布屏幕截图，但如果您在两种浏览器中查看 jsfiddle，您就会看到我所引用的内容。

这是我的代码

http://jsfiddle.net/JSDesign/aJagN/

还有一个小样本:

    <li>
        <a href="#">
            <span class="ca-icon"><i class="icon-home"></i></span>
            <div class="ca-content">
                <h2 class="ca-text">Home</h2>
            </div>
        </a>
    </li>

CSS 在 jsfiddle 上。

此外，如果重要的话，我会使用 Font Awesome。

http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css

非常感谢!

Answer 1

Chrome/FF 之间肯定有区别。发生这种情况是因为浏览器具有不同的默认属性。我 reset示例中的 CSS，然后相应地调整 CSS，更改相对定位和边距。

这是一个 updated example跨浏览器的效果相同。

更新/修改的属性:

.ca-menu li a {
    margin-top:14px;
}

.ca-content {
    position: relative;
    top: 36%;
}