当字体大小在内部元素上更改时,IE文本缩进的问题

Question

当字体大小在内部元素上更改时,IE文本缩进的问题

tjm*_*tjm 6 html css internet-explorer-8

我正在用一系列引号构建一个页面.每个报价的形式如下:

<blockquote>
<span class="ldquo">&ldquo;</span>The quote<span class="rdquo">&rdquo;</span>
<cite>The author</cite>
</blockquote>

Run Code Online (Sandbox Code Playgroud)

引号应该被左上方的大引号(ldquo绝对定位)和右下角的大引号(rdquo浮动然后相对定位)阻挡.引号中的文本为text-indent-ed,以使左上角的引号不与文本重叠.在Firefox(3.6)和Chromium(8)中,这很好用,但在IE(8)中,当我更改字体大小时ldquo,似乎文本缩进从大小上升,它将基于字体大小容器的大小ldquo(容器中的第一个元素).

我发现,如果我<span />之前添加一个空ldquo并更新其左偏移以匹配容器字体大小的文本缩进它在IE中工作但是这在Firefox和Chromium中断,它们期望左偏移为ldquo' s字体大小.并不是说作为"修复"无论如何都会特别令人高兴.

一些重新创建问题的代码如下:

<!DOCTYPE html>
<html>
<head>
<style>
    #container {
        width: 20em;
    }

    blockquote {
        margin :0 0 2em 0;
        position:relative;
        text-indent: 2em;
        font-size:0.7em;
        text-align:justify;
    }

    .ldquo, .rdquo {
        color: #EC008C;
        font-size:3em;
        height:0;
        top: -0.15em;
    }

    .ldquo {
        position:absolute;
        left: -0.6em;
    }

    .rdquo {
        float:right;
        position:relative;
        left: 0.05em;
    }   

    blockquote cite {
        display:block;
        font-weight:bold;
        text-indent:0;
    }
</style>
</head>

<body>
<div id="container">

    <blockquote>
    <span class="ldquo">&ldquo;</span>A quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <span class="rdquo">&rdquo;</span>
    <cite>A. Author</cite>
    </blockquote>

    <blockquote>
    <span class="ldquo">&ldquo;</span>Another quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <span class="rdquo">&rdquo;</span>
    <cite>A. N. Other Author</cite>
    </blockquote>

    <!-- more quotes -->
</div> 

</div> 
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

有没有人见过这个,可以帮我解决问题？谢谢.

Answer 1

tjm*_*tjm 1

好的。我想我找到了修复布局的解决方案，不幸的是不是错误。

我删除了文本缩进，而是添加了适当的右边距，ldquo然后向左浮动。由于的高度ldquo为零，这只是让我回到原来的情况，文本位于引号之上。但是添加最小 1px 高度可以解决这个问题，并且祈祷它似乎有效。

这是最终的 CSS。

#container {
    width: 20em;
}

blockquote {
    margin :0 0 2em 0;
    position:relative;
    font-size:0.7em;
    text-align:justify;
}

.ldquo, .rdquo {
    color: #EC008C;
    font-size:3em;
    height:1px;
    top: -0.15em;
    position:relative;
}

.ldquo {
    float:left;
    margin-right:0.14em;
}

.rdquo {
    float:right;
    left: 0.05em;
}   

blockquote cite {
    display:block;
    font-weight:bold;
    text-indent:0;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年前
查看次数：	663 次
最近记录：	15 年前