css - 伪选择器 :before not positioning correctly in IE9, 10

Question

我遇到了一个无法解决的问题。我有一个绝对定位的伪选择器 :before 在一个相对定位的容器内，该容器在除 IE9 和 10 之外的所有内容中都正确定位。

我花了一些时间研究这个问题并尝试实现 thirtydot's solution mentioned here .

这是代码示例:http://jsfiddle.net/66d25/20/

在所有其他浏览器中，引号正确显示在包含 block 引用段落的左上角。在 IE9/10 中，引号不正确地位于引号气泡的中间顶部。

我尝试将 overflow:visible 添加到包含的 p 标签中，但这并没有解决问题。我还在下面包含了我的 scss。非常感谢对此问题的任何见解。

    blockquote {
        border-left: none;
        padding: 0;
        margin: 2em 0 1em 0;
        position: relative;
        &:after, &:before {
            top: 100%;
            border: solid transparent;
            content: '';
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            display:block;
        }
        p {
            color: shade($charcoal, 20%);
            margin: 0;
            background: #fff;
            @include border-radius(5px);
            @include box-shadow(inset 0 2px 0 rgba(70, 130, 180, 0.7), -5px -4px 25px rgba(0, 0, 0, 0.3));
            font-size: emCalc(17px);
            color: adjust-lightness($charcoal, 20%);
            font-weight: 400;
            line-height: 1.5em;
            font-style: italic;
            text-indent: 2em;
            position: relative;
            padding: 1em;
            overflow:visible;
            &:before {
                content: "\201C";
                font-family: serif;
                font-style: normal;
                font-weight: 700;
                position: absolute;
                font-size: 5.5em;
                top: 15px;
                left: -50px;
                color: $blue;
                text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
                display: block;
                height: 25px;
                width: 25px;
            }
        }

        footer {
            padding-top: 1em;
            cite {
                text-align: right;
                text-transform: uppercase;
                font-weight: 700;
                font-size: 1.25em;
                font-style: normal;
                color: $vblue;
                text-shadow: 0 1px 1px rgba(255,255,255,0.7);
                &:before {
                    content: '';
                }
            }
            &:before {
                content: '';
                position: absolute;
                border-style: solid;
                border-width: 15px 15px 0;
                border-color: #FFFFFF transparent;
                display: block;
                width: 0;
                z-index: 1;
                margin-left: -15px;
                bottom: 33px;
                left: 80%;
            }   

        }
    }

Answer 1

删除:

p {
    text-indent: 2em;
}

解决了 IE11 上的问题:http://jsfiddle.net/66d25/22/

要将引用放回您打算放置它的位置，可以通过以下方式实现:

p {
    text-indent: 34px; /* font-size is 17px so 2em=34px*/
}

演示:http://jsfiddle.net/66d25/23/

所以问题出在 em 单位上，而像素没问题。想想为什么 IE 会那样做......