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