Вопросы Теги

Проблема IE с отступом текста при изменении размера шрифта на внутреннем элементе

Я оформляю страницу серией цитат. Каждая цитата имеет форму: 

<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 (первый элемент в контейнере).

Я обнаружил, что если я добавлю пустой перед 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">&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>

Кто-нибудь видел это раньше и может помочь мне с исправлением? Спасибо.

6
задан Paul D. Waite 15 December 2010 в 02:05
поделиться