不同的垂直对齐Chrome与Firefox（blockquote：之前）

Question

我正在尝试创建一个纯CSS blockquote样式。 问题是：使用blockquote创建的引号：在Chrome中比在Firefox和IE9中更低。欢迎任何帮助，我无能为力：（

JSFiddle：http://jsfiddle.net/w3A7h/3/

是否有一种简单的方法可以为Chrome制作CSS规则？

Answer 1

在这种情况下你应该做的第一件事是使用reset stylesheet默认情况下在浏览器之间使元素呈现更相同。这将为您节省大量的调试时间，因为这会使很多问题消失。

那说，试试这个：

http://jsfiddle.net/AWJyW/

我将引用样式从位于blockquote之外的位置更改为位于第一个<p>标记内部之前。然后我将位置更改为相对位置，将其向左浮动，并设置负边距以阻止它使文本变形。这样做的原因是因为虽然Chrome和Firefox显然不同意从哪里开始绝对定位的界限，但他们同意内部界限的位置：

blockquote p:first-child:before {
        color: #ededed;
        content: "\201C";
        display: block;
        font-family: Georgia,serif;
        font-size: 110px;
        left: -56px;
        margin-right: -40px;
        position: relative;
        float: left;
        top: -30px;
    }