У меня есть специфическая проблема, и я надеюсь, что кто-то сталкивался с этим раньше и решил это или знает об этой проблеме и хорошо знает, что вызывает это.
Я создаю сайт с использованием HTML5-Boilerplate v4.3.0, и у меня есть обычные условные операторы для IE (чтобы заставить браузер использовать последний механизм рендеринга), как показано здесь...
<!--[if HTML5]><![endif]-->
<!doctype html>
<!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lte9 lte8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9 lte9" lang="en"> <![endif]-->
<!--[(gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!--[if !HTML5]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta charset="utf-8"> ....
<!--- End Meta tags -->
Теперь у меня есть эти коды на основе ссылки здесь , эта ссылка , а также ответ SO, опубликованный andrew здесь.
У меня также есть небольшой условный оператор в теге body, который нацелен на IE, и если версия меньше 9, то он отображает div, как показано здесь...
<body>
<!--[if lt IE 9]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience. This site was designed to work with modern browsers like Internet Explorer 9 or above, Firefox, Chrome, etc.</p>
<![endif]-->
.......
</body>
элемент css для класса "browsehappy" выглядит так...
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
position:fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #fff;
font-size: 14px;
width: 100%;
text-align: center;
}
Я использую IIS7 и/или Xampp на базе Apache в качестве своего веб-сервера. И я знаю, что на многих сайтах онлайн-справки говорится, что лучший способ заставить IE открываться в определенном режиме — это использовать файлы конфигурации сервера. поэтому я создал файлы...
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=10" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
web.config для IIS7 и...
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=edge"
# `mod_headers` can't match based on the content-type, however, we only
# want to send this header for HTML pages and not for the other resources
<FilesMatch "\.(appcache|crx|css|eot|gif|htc|ico|jpe? g|js|m4a|m4v|manifest|mp4|oex|oga|ogg|ogv|otf|pdf|png|safariextz|svgz?|ttf|vcf|webapp|webm|webp|woff|xml|xpi)$">
Header unset X-UA-Compatible
</FilesMatch>
</IfModule>
часть .htaccess для apache
Все работает отлично, если у меня есть файлы конфигурации сервера в моей папке с файлами html.
Но часть моей проблемы заключается в том, что у меня нет никакого контроля или даже доступа к конечному веб-серверу, на котором будет находиться сайт. Поэтому я должен придумать решение, которое не включает файлы конфигурации сервера.
Теперь условный оператор вверху, перед тегом head, кажется, работает. При открытии в IE9 он открывается в режиме браузера, совместимом с IE9, и в стандартном режиме документов IE9 (в отличие от режима документов IE7 и совместимости с IE9).
Но условный оператор внутри тега body работает неправильно. Теперь, как я уже упоминал, поскольку у меня нет контроля над конечным веб-сервером сайта, я удалил файлы конфигурации из корневой папки и использовал метод метатегов, чтобы заставить браузер.
это мой снимок экрана при открытии в IE9 без файлов конфигурации сервера в корневой папке. С конфигурационными файлами ведет себя корректно.
Теперь мой вопрос: даже если браузер открыт в режиме IE9, почему появляется разделение?
Любая помощь будет принята с благодарностью. Заранее спасибо. p.s: вывод работает нормально при открытии в ie11. не тестировал в ie10.
