IE10 не применяет стили CSS в заголовках/нижних колонтитулах HTML/nav/main за пределами JSFiddle. Вызов режима HTML5 quirks?

У меня возникли проблемы с IE10 с использованием стилей CSS, которые я указал для элементов HTML5 (и их дочерних элементов при таргетинге на ребенка с использованием имени тега элемента HTML5 в селекторе), поэтому я разбил его на более простой пример и собрал вместе простой JSFiddle example, чтобы продемонстрировать эту проблему, но когда я протестировал JSFiddle, IE10 решила правильно применить стили. Итак, я взял точный исходный код получаемого iframe JSFiddle и скопировал его в a file hosted on my server и, увы, он не смог правильно применить стили еще раз.IE10 не применяет стили CSS в заголовках/нижних колонтитулах HTML/nav/main за пределами JSFiddle. Вызов режима HTML5 quirks?

источник JSFiddle в:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title> - jsFiddle demo</title> 
    <script type='text/javascript' src='/js/lib/dummy.js'></script> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
    <style type='text/css'> 
    header, nav, main, footer { 
     display: block; 
     background: gray; 
     padding: 10px; 
     margin: 1px; 
    } 
    nav ul { 
     list-style: none; 
     padding: 0; 
     margin: 0; 
    } 
    nav ul li { 
     display: inline-block; 
    } 
    nav ul li a { 
     color: white; 
     text-decoration: none; 
     padding: 10px; 
    } 
    </style> 
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){ 
}//]]> 
</script> 
</head> 
<body> 
    <header> 
    <img src="http://placehold.it/300x80&text=Logo" /> 
</header> 
<nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 
<main>  
    <p>This is filler content inside the <code>&lt;main&gt;</code> element. The <code>&lt;header&gt;</code>, <code>&lt;main&gt;</code> and <code>&lt;footer&gt;</code> should each have a gray background and be displayed as a block.</p> 
</main> 
<footer> 
    <p>Copyright &copy; 2013, All Rights Reserved</p> 
</footer> 
</body> 
</html>

Что сделка с IE10? Это не может быть код, поскольку он отлично работает в iframe, или iframes получают то же самое отношение, что и их родительская страница?

Что вызывает IE10 здесь? Может быть, это связано с сервером? Это не имеет большого смысла, но это странно.

Естественно, любые исправления наверняка оценены.

источник

2013-06-26 purefusion

Для чего стоит просмотр источника JSFiddle в его собственном окне, все еще выглядит хорошо, что заставляет меня думать, что это серверная вещь, но это просто не имеет никакого смысла. Почему это произойдет? http://fiddle.jshell.net/4NmBR/1/show/ – purefusion

В соответствии с инструментами разработчика он работает в режиме IE8 на вашем сервере. Попробуйте добавить этот код в ваш <head> тег:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Вы также можете установить это на сервере:

Apache:

<IfModule mod_headers.c> 
    Header set X-UA-Compatible "IE=edge" 
</IfModule>

источник

2013-06-26 17:48:09 hamstu

Спасибо, что освежили мою память. Прошло некоторое время с тех пор, как я использовал этот тег. Все еще любопытно, как настроить сервер на стороне. – purefusion

Какой сервер вы используете? Я добавил инструкции для Apache (.htaccess) – hamstu

Ваш веб-сервер имеет «X-UA- Совместимый "заголовок, установленный в" IE = 8 ", что заставляет IE работать в режиме IE8. Вам нужно либо удалить его, либо установить его на «край». Если у вас нет доступа к настройкам сервера, вы можете попробовать добавить modernizr на свою страницу, что должно позволить вам стилить элементы HTML5 в старых IE.

источник

2013-06-26 17:56:17

А, я не понимал, что можно установить на стороне сервера. Где он должен быть установлен? В вашем ответе было неясно, было ли это что-то, что входит в файл .htaccess или в другом месте. – purefusion

Заголовки могут быть установлены как в конфигурации сервера, так и программно. В вашем случае заголовок уже установлен где-то (в IE8), и я бы посоветовал вам найти, где это делается, и обновить его. В противном случае вы рискуете установить его в нескольких местах, что будет трудно отлаживать. Реальная реализация зависит от вашей версии сервера и сервера. Я только сделал это в IIS, очевидно, что вы используете Apache, но он может быть полезен для кого-то другого: 'Response.Headers.Add (« X-UA-Compatible »,« IE = edge, chrome = 1 »); ' ' Response.AddHeader («X-UA-Compatible», «IE = edge, chrome = 1»); ' –

IE10 не применяет стили CSS в заголовках/нижних колонтитулах HTML/nav/main за пределами JSFiddle. Вызов режима HTML5 quirks?

ответ

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