Question

我正在使用一系列引号设置页面样式。每个引用的形式为：

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

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

我发现如果我在<span />之前添加一个空ldquo并更新其左偏移量以匹配容器字体大小的文本缩进，则它在IE中有效但在Firefox中会中断和Chromium期望左偏移量为ldquo的font-size的一小部分。并不是说作为“修复”无论如何都会特别令人高兴。

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

<!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>

有没有人见过这个，可以帮我修复一下？感谢。

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

Answer 2

您是否尝试过padding-left而不是text-indent？对于你的blockquote，使用1em的左边填充并将.ldquo更改为只有-0.2em的“left”

Answer 3

尝试以下方法。不确定它是否可以跨浏览器工作 - 可能需要对IE进行奇怪的调整（我的意思是什么不对，对吧？）但它在Chrome中工作正常，所以应该在Opera和FF中完美地工作。您可能需要调整宽度等，但它可以达到您想要的效果。

新解决方案（报价下没有缩进）

<div style="position: relative;">
    <span style="float: left; width: 20px; height: 20px; font-size: 3em; margin-top: -0.25em; margin-left: 0; margin-right: 5px;">&ldquo;</span>
    <p style="text-align: justify;">
        fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf
    </p>
    <span style="float: right; width: 20px; height: 20px; font-size: 3em; margin-top: -0.9em;">&rdquo;</span>
    <div style="clear: both;"></div>
</div>

旧解决方案

<div style="position: relative;">
    <span style="float: left; width: 20px; height: 20px; font-size: 3em; margin-top: -0.25em; margin-left: 0; margin-right: 5px;">&ldquo;</span>
    <p style="margin-left: 25px; margin-right: 25px; text-align: justify;">
        fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf fdfsdf ldsfj dsfjds lfsdf
    </p>
    <span style="float: right; width: 20px; height: 20px; font-size: 3em; margin-top: -1em;">&rdquo;</span>
    <div style="clear: both;"></div>
</div>

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

3 个答案: