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%;
}