Я оформляю страницу серией цитат.Каждая цитата имеет вид:
<blockquote>
<span class="ldquo">“</span>The quote<span class="rdquo">”</span>
<cite>The author</cite>
</blockquote>
Цитата должна быть заблокирована большой кавычкой слева вверху (ldquo, абсолютно позиционировано) и большой справа внизу (* 1005).*, плавающий тогда относительно позиционированный).Текст в цитате обозначен text-indent, чтобы верхний левый кавычка не перекрывал текст.В Firefox (3.6) и Chromium (8) это работает нормально, но в IE (8), когда я изменяю размер шрифта на ldquo, кажется, что текстовый отступ обновляется с размера, который будет основан на шрифтеразмер контейнера до размера ldquo (первый элемент в контейнере).
Я обнаружил, что если я добавлю пустой <span /> перед 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>
Кто-нибудь видел это раньше и может помочь мне с исправлением?Спасибо.