Ошибка совместимости режима IE8 (или, может быть, IE7), связанная с позицией CSS относительно - PullRequest
Новая
       27

Ошибка совместимости режима IE8 (или, может быть, IE7), связанная с позицией CSS относительно

1 голос
/ 19 февраля 2011

Есть ли у кого-нибудь комментарии по поводу неправильного поведения?
Я проверил его на IE8 в режиме совместимости, но я не уверен в реальном поведении IE7. Любые другие браузеры ведут себя нормально.

При перекомпоновке документа любые относительные изображения теряют свои координаты.
Поведение можно увидеть, если текст добавлен к абзацу, но нет, если добавлено больше абзацев!

Смотрите это: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Bad Behaviour</title>
    <script type='text/javascript'>
        window.onload = function(){
            document.getElementById('command').onclick = function(){
                var p = document.getElementById('paragraph');
                p.innerHTML = p.innerHTML + p.innerHTML;
                return false;
            }
        }
    </script>
</head>
<body>
    <a id='command' href='?'>command</a>
    <p id='paragraph'>
    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
    </p>
    <div style='background-color:black;'>
        <img src='success.png' style='position:relative; '/>
    </div>
</body>
</html>

Посмотрите, как изображение отображается после перекомпоновки?

1 Ответ

3 голосов
/ 20 февраля 2011

Я понятия не имею, почему IE7 и ниже делают это, но решение состоит в том, чтобы дать контейнер 

<div style='background-color:black;'>

относительная позиция, 

<div style='background-color:black;position:relative;'>

, которая решает эту (и многие другие) проблемы. На самом деле, если у вас нет причин не делать этого, лучше всего указать относительную позицию всех ваших контейнеров для IE.

...