Question

I am trying to create a pure CSS blockquote styling.
The problem is: the quotation mark, created with blockquote:before is aligned lower in Chrome than it is in Firefox and IE9. Any help welcome, I am clueless 🙁

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

Is there an easy way to make a CSS rule for Chrome only?

Answer 1

The first thing you should do in situations like this is to use a reset stylesheet to make your elements render more identically between browsers by default. This will save you an incredible amount of time debugging, because it will make a lot of problems like these go away.

That said, try this on:

http://jsfiddle.net/AWJyW/

I changed the quote style from being positioned outside the blockquote to being positioned before the first <p> tag inside. Then I changed the position to relative, floated it left, and set a negative margin to stop it deforming the text. The reason this works is because while Chrome and Firefox evidently disagree upon where to begin the bounds for absolute positioning, they agree on the location of the inner bounds:

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