Question

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

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

在所有其他浏览器中，引号正确显示在包含的blockquote段落的左上角。在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会这样做......

伪选择器：在IE9,10中未正确定位之前

1 个答案: