Почему IE8 игнорирует маркер дочернего элемента?

Когда я добавляю margin в .child в следующем коде, IE8 игнорирует его. В современных браузерах работает тот же код, что и ожидалось. Чем это вызвано?Почему IE8 игнорирует маркер дочернего элемента?

<html lang=“de“ xml:lang=“de“ xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta http-equiv=“Content-Type“ content=“text/html“; charset=“iso-8859-1“ /> 
 
    <title></title> 
 
    <style> 
 
    .parent { 
 
     margin: 5px; 
 
     border: 10px solid blue; 
 
     position: relative; 
 
    } 
 
    .child { 
 
     margin: 10px; 
 
     border: 10px solid red; 
 
     padding: 4px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div class="parent"> 
 
    <p class="child" style="width:80%; position:relative; left:10px; top:10px; background-color:yellow;">I'm the CHILD! 
 
     <span id="textOutput"></span> 
 
    </p> 
 
    </div> 
 

 
</body> 
 

 
</html>

источник

2015-11-05 Manny_user3297459

IE8 не является современным браузером :) –

Пожалуйста, укажите полный код (включая HTML). Не удалось воспроизвести это с предоставленными стилями. –

Хорошо! Я обновил свой код! Пожалуйста, ребята, проверьте еще раз! –

Проблема заключается в том, что вы не поставляли doctype, что означает, что IE8 не знает, какой режим рендеринга использовать и поэтому недобросовестный режиме совместимости. Режим Quirks необходим старый, нестандартное расположение двигателя используется назад, когда полотно было молодым:

Есть теперь три режима, используемые компоновки двигателей в веб-браузерах: режим совместимости, режим почти стандарты и полные стандарты Режим. В режиме quirks макет эмулирует нестандартное поведение в Navigator 4 и Internet Explorer 5. Это необходимо для поддержки веб-сайтов, которые были созданы до широкого внедрения веб-стандартов. В режиме полного стандарта поведение (надеюсь) - это поведение, описываемое спецификациями HTML и CSS. В почти стандартном режиме реализовано только очень небольшое количество причуд.

Quirks Режим и стандартов (https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode)

Браузеры обрабатывать отсутствие doctype по-разному, и вы всегда должны убедиться, что вы задаете один в начале вам HTML, чтобы обеспечить последовательный рендеринг стр. На момент написания статьи я бы рекомендовал HTML5 doctype, так как он короток, понятен и поддерживается еще в IE6.

<!DOCTYPE html> 
 
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 
    <title></title> 
 
    <style> 
 
    .parent { 
 
     margin: 5px; 
 
     border: 10px solid blue; 
 
     position: relative; 
 
    } 
 
    .child { 
 
     margin: 10px; 
 
     border: 10px solid red; 
 
     padding: 4px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="parent"> 
 
    <p class="child" style="width:80%; position:relative; left:10px; top:10px; background-color:yellow;">I'm the CHILD! 
 
     <span id="textOutput"></span> 
 
    </p> 
 
    </div> 
 
</body> 
 

 
</html>

Следует также отметить, что вы должны использовать обычные кавычки не фигурные кавычки для значений атрибутов и нужен замыкающая html тега.

источник

2015-11-06 14:09:11

Почему IE8 игнорирует маркер дочернего элемента?

ответ

Смежные вопросы