当内部元素的字体大小发生变化时，IE 出现文本缩进问题
我正在用一系列引号来设计页面。每个引用的形式如下：
<blockquote>
<span class="ldquo">“</span>The quote<span class="rdquo">”</span>
<cite>The author</cite>
</blockquote>
引用应由左上角的大引号（ldquo，绝对定位）和右下角的大引号（rdquordquo）隔开。 code>，浮动然后相对定位）。引用中的文本经过文本缩进，以便左上角的引号不会与文本重叠。在 Firefox (3.6) 和 Chromium (8) 中，这工作正常，但在 IE (8) 中，当我更改 ldquo 上的字体大小时，文本缩进似乎从原来的大小升级基于容器的字体大小为 ldquo（容器中的第一个元素）的大小。
我发现，如果我在 ldquo 之前添加一个空的 并更新其左侧偏移量以匹配容器字体大小处的文本缩进在 IE 中有效，但在 Firefox 和 Chromium 中会出现问题，它们期望左侧偏移量为 ldquo 字体大小的一小部分。无论如何，作为“修复”并不是特别令人高兴。
重现问题的一些代码如下：
<!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">“</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">”</span>
<cite>A. Author</cite>
</blockquote>
<blockquote>
<span class="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">”</span>
<cite>A. N. Other Author</cite>
</blockquote>
<!-- more quotes -->
</div>
</div>
</body>
</html>
有人以前见过这个并可以帮助我修复吗？ 谢谢。
I'm styling a page with a series of quotes. Each quote is of the form:
<blockquote>
<span class="ldquo">“</span>The quote<span class="rdquo">”</span>
<cite>The author</cite>
</blockquote>
The quote should be blocked off by a large quotation mark at the left top (ldquo, absolutely positioned) and a large one at the bottom right (rdquo, floated then relatively positioned). The text in the quote is text-indent-ed so that the top left quotation mark does not overlap the text. In Firefox (3.6) and Chromium (8) this works fine, but in IE (8) when I change the font-size on ldquo it seems that the text-indent gets upgraded from the size it would be based on the font-size of the container to the size of ldquo (the first element in the container).
I've found that if I add an empty <span /> before ldquo and update its left offset to match the text-indent at the container font-size it works in IE but this breaks in Firefox and Chromium which are expecting the left offset as a fraction of ldquo's font-size. Not that that as a "fix" would be particularly pleasing anyway.
Some code that recreates the problem follows:
<!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">“</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">”</span>
<cite>A. Author</cite>
</blockquote>
<blockquote>
<span class="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">”</span>
<cite>A. N. Other Author</cite>
</blockquote>
<!-- more quotes -->
</div>
</div>
</body>
</html>
Has anyone seen this before and can help me with a fix?
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
好的。我想我找到了修复布局的解决方案，不幸的是不是错误。
我删除了文本缩进，而是向 ldquo 添加了适当的右边距，然后向左浮动。由于
ldquo的高度为零，这只是让我回到了文本位于引号顶部的原始情况。但是添加最小 1px 高度可以解决这个问题，并且祈祷它似乎有效。这是最终的 CSS。
Ok. I think I found a solution to fix the layout, unfortunately not the bug.
I removed the text-indent and instead added an appropriate right margin to
ldquowhich i then floated left. Since the height ofldquowas zero this just brought me back to the original situation with the text sitting on top of the quotation mark. But adding a minimal 1px height, fixes that, and fingers crossed it seems to work.Here is the final CSS.
您是否尝试过使用 padding-left 而不是 text-indent？对于您的块引用，请使用 1em 的 padding-left 并将 .ldquo 更改为仅具有 -0.2em 的“left”
Have you tried padding-left instead of text-indent? For your blockquote, use a padding-left of 1em and change the .ldquo to have "left" of only -0.2em
尝试以下操作。不确定它是否可以跨浏览器工作 - 可能需要对 IE 进行一些奇怪的调整（我的意思是不需要，对吧？）但它在 Chrome 中工作正常，所以应该在 Opera 和 FF 中完美工作。您可能想调整宽度等，但它会按照您的意愿进行。
新解决方案（引号下无缩进）
旧解决方案
Try the following. Not sure that it works cross-browser - may require the odd tweak for IE (I mean what doesn't, right?) but it works fine in Chrome so should work in Opera and FF perfectly. You may want to adjust widths etc. but it does what you want it to.
New solution (no indent under quote)
Old solution