IE8 проблема с Twitter Bootstrap 3
Я создаю сайт, используя новый Twitter Bootstrap. Сайт выглядит отлично и работает во всех необходимых браузерах, кроме IE8.
В IE8, похоже, отображаются элементы мобильной версии, но они растянуты на весь экран моего рабочего стола. Я полагаю, что проблема, с которой я столкнулся, заключается в том, что сначала загружается Twitter. Так что по какой-то причине IE8 идет на эту опцию.
Я также заметил, что container Класс, похоже, не использует свойства CSS максимальной ширины, как предполагалось. Кто-нибудь может увидеть, что я сделал не так?
<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>
<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">
<header>
<div class="topArea clearfix">
<div class="container">
<div class="topLinks">
<div class="btn-group">
<span class="flag" data-toggle="dropdown"> </span>
<ul class="dropdown-menu">
<li><a href="#">Country 1</a></li>
<li><a href="#">Country 2</a></li>
<li><a href="#">Country 3</a></li>
<li class="divider"></li>
<li><a href="#">Country 4</a></li>
<li><a href="#">Country 5</a></li>
<li><a href="#">Country 6</a></li>
</ul>
</div>
<div class="visible-sm btn-group">
<div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x"> </i></div>
<ul class="dropdown-menu">
<li><a href="#">Parts & Service</a></li>
<li><a href="#">Store Locator</a></li>
<li><a href="#">Find a Service Centre</a></li>
<li><a href="#">Parts List</a></li>
<li><a href="#">Tool Vibration</a></li>
<li><a href="#">Resource Centre</a></li>
<li><a href="#">Media Centre</a></li>
<li><a href="#">Register your Tools</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">
<button type="button" class="btn btn-default">Where to Buy</button></a></li>
</ul>
</div>
<div class="topNav">
<ul class="hidden-sm">
<li>
<div class="btn-group">
<a href="#" data-toggle="dropdown">Parts & Service</a>
<ul class="dropdown-menu">
<li><a href="#">Store Locator</a></li>
<li><a href="#">Find a Service Centre</a></li>
<li><a href="#">Parts List</a></li>
<li><a href="#">Tool Vibration</a></li>
</ul>
</div>
</li>
<li><a href="#">Resource Centre</a></li>
<li><a href="#">Media Centre</a></li>
<li><a href="#">Register your Tools</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">
<button type="button" class="btn btn-default">Where to Buy</button></a></li>
</ul>
</div>
<div class="searchArea">
<input type="text" />
<a href="#" class="goBtn">GO</a>
</div>
</div>
</div>
</div>
<div class="mainNavArea">
<div class="container rel">
<div class="logo">
<img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
</div>
<div class="navi">
<div class="navbar">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Place everything within .navbar-collapse to hide it until above 768px -->
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav nav-justified">
<li><span class="dropArrow"> </span><span class="topNavPosition">Power Tools</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Power Tools</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Hand Tools</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Hand Tools</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Test & Measurement</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Test & Measurement</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Accessories</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Accessories</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</div>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar -->
</div>
</div>
</div>
</header>
22 ответа
Вы получили свой CSS из CDN (bootstrapcdn.com) response.js работает только для локальных файлов. Так что попробуйте свой сайт на IE8 с локальной копией bootstrap.css. Или читайте: CDN / X-Domain Setup
Примечание. См. Также: https://github.com/scottjehl/Respond/pull/206
Обновить:
Пожалуйста, прочитайте: http://getbootstrap.com/getting-started/
Кроме того, Internet Explorer 8 требует использования response.js для включения поддержки медиазапросов.
Смотрите также: https://github.com/scottjehl/Respond
По этой причине базовый шаблон содержит следующие строки в разделе заголовка:
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
Я также должен был установить следующий тег META:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
У меня была такая же проблема при переходе с Bootstrap 2 на 3. Я уже получил response.js и html5shiv.js и установил мета в край. Я пропустил, что с 2 до 3 изменился тип элемента navbar. В Bootstrap 2 это был nav. В Bootstrap 3 теперь это заголовок. Таким образом, чтобы полностью решить проблему, мне пришлось
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Поместите это сразу после того, как я загрузил свой CSS:
<!--[if lt IE 9]>
<script src="~/Content/compatibility/html5shiv.js"></script>
<script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->
а затем изменить
<nav class="navbar" role="navigation">
</nav>
в
<header class="navbar" role="navigation">
</header>
Ох, и для хорошей меры я также добавил
<meta name="viewport" content="width=device-width, initial-scale=1.0">
просто потому, что это то, что есть у самого сайта Bootstrap.
В моем случае проблема заключалась в минимизированном загрузчике CSS. Чтобы сделать загрузочную версию 3.0.2 адаптивной в IE8 (эмулированную с помощью инструментов разработчика F12), мне пришлось:
1 - Установите флаг X-UA-Compatible.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2 - использовать не минимизированный bootstrap.css вместо bootstrap.min.css
<link href="/css/bootstrap.css" rel="stylesheet" />
3 - Добавьте response.js (и html5shiv.js)
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
Так, на всякий случай. Убедитесь, что вы загружаете специфичные для IE файлы js после загрузки файлов css.
Положил respond.js внизу страницы, но перед закрытием body тег и вот ссылка respond.js и запустите этот код на вашем локальном хосте.
Как указывалось ранее, есть две разные проблемы: 1) IE8 не поддерживает медиазапросы 2) response.js, используемый вместе с междоменными css-файлами, должен быть включен, как описано ранее.
Если вы хотите использовать BootstrapCDN, вот рабочий пример:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
<link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<script src="js/ie/html5shiv.js"></script>
<script src="js/ie/respond.min.js"></script>
<script src="js/ie/respond.proxy.js"></script>
<![endif]-->
Также убедитесь, что скопировали response.proxy.gif, response.min.js и response.proxy.js в локальных каталогах
Не забудьте разместить ваши ссылки CSS в <head> как respond.js берет только те.
После проверки:
- DOCTYPE
- X-UA-совместимый метатег
- Включение html5shiv.js и response.js (и загрузка последних версий)
- response.js быть локальным
- Хостинг сайта с веб-сервера, а не из File://
- Не используя @import
- ...
Все еще col-lg, col-md и col-sm не работали. Наконец, я переместил ссылки на bootstrap до ссылок на html5shiv.js и response.js, и все заработало.
Вот фрагмент:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap Test for IE8</title>
<!-- Moved these two lines up -->
<link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
<script src="includes/js/bootstrap.js"></script>
<!--[if lt IE 9]>
<script src="includes/js/html5shiv.js"></script>
<script src="includes/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color:red;">col-md-4</div>
<div class="col-md-8" style="background-color:green;">col-md-8</div>
</div>
</div>
</body>
</html>
Нужно добавить - <meta http-equiv="X-UA-Compatible" content="IE=edge">
Я использовал Bootstrap 3 - он работал на IE на моем локальном компьютере.
Я положил это вживую не работает в IE.
Просто Bootstrap не включает эту строку кода в свои шаблоны, я не уверен почему, но это может быть связано с тем, что он не совместим с W3C.
Из объяснения говорится, что IE8 является стандартной версией для вас и делает content="IE=edge" будет отображать страницу в самом высоком режиме. Чтобы сделать его совместимым, измените его на content="IE=8",
Режим IE8 поддерживает множество установленных стандартов, включая спецификацию каскадных таблиц стилей W3C уровня 2.1 и API селекторов W3C; он также предоставляет ограниченную поддержку спецификации 3-го уровня каскадных таблиц стилей W3C (рабочий проект) и других новых стандартов.
В пограничном режиме Internet Explorer отображает содержимое в самом высоком доступном режиме. В Internet Explorer 9 это эквивалентно режиму IE9. Если в будущем выпуске Internet Explorer будет поддерживаться режим более высокой совместимости, страницы, переведенные в граничный режим, будут отображаться в самом высоком режиме, поддерживаемом этой версией. Те же самые страницы будут по-прежнему отображаться в режиме IE9 при просмотре с помощью Internet Explorer 9.
Ссылка Что делает ?
У меня есть решение этой проблемы. На самом деле IE7 и 8 не поддерживают @media должным образом, и если вы проверите css для классов "col-md-*", и ширина указана в медиа-ширине 992px. Просто создайте новый CSS-файл IE, например: IE.css, и добавьте его в условные комментарии. А затем просто скопируйте классы, необходимые для вашего дизайна, напрямую с любыми медиа-запросами, и все готово.
У меня была точно такая же проблема при переходе с bootstrapv2 на v3.
Если (как и я) вы мигрировали, заменив старый spanX на col-sm-X, вам также нужно добавить классы col-X. col-X - это стили вне любых блоков @media, поэтому они работают без поддержки медиазапросов.
Чтобы установить ширину контейнера, вы можете установить его вне блока @media. Что-то вроде:
.container {
max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";
Так же, как головы. У меня была такая же проблема, и ни один из вышеперечисленных не решил ее для меня. В конце концов я обнаружил, что response.js не анализирует CSS, на который ссылается @import. У меня было все bootstrap.min.css импортируется через @import в мой main.css,
Поэтому убедитесь, что у вас нет CSS, содержащего ваши медиа-запросы, на которые ссылается @import.
Используйте это решение
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />
<![endif]-->
Эта строка <script src="js/css3-mediaqueries.js"></script> включить медиазапросы. Эта строка <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> включить загрузочные шрифты.
Проверено на Bootstrap 3.3.5
Ссылка для скачивания mediaqieries.js. Ссылка для загрузки bootstrap-ie7.css
Если вы используете Bootstrap 3 и все работает нормально в других браузерах, кроме IE, попробуйте следующее.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
Я прочитал все комментарии здесь, попробовал все... но не смог заставить его работать с Windows 7 - Internet Explorer 11 (с режимом документа: IE8).
Потом пришло в голову, что режим работы с документами (IE8) отличается от реального IE8, поэтому я установил Windows Virtual PC (Windows 7 с Internet Explorer 8) и tadaaaa... он работает как шарм!
Я поместил этот кусок кода просто внизу страницы, чтобы он работал:
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>
Моя голова тег выглядит так:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap core CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modern-business.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
если вы хотите попробовать локально... попробуйте через localhost или создайте QA-сервер, установите содержимое и попробуйте.
Нам нужен response.js для начальной загрузки 3, и он не будет работать на локальной машине, если мы просто поместим его в js и добавим его в html в заголовке. Он скажет, что доступ запрещен. он работает только через сервер, так как IE имеет ограничение безопасности.:П
Я столкнулся с той же проблемой, попробовал первый ответ, но чего-то не хватало.
Если вы, ребята, используете Webpack, ваш css будет загружен как тег стиля, который не поддерживается response.js, ему нужен файл, поэтому убедитесь, что bootstrap загружен как файл css.
Лично я пользовалась extract-text-webpack-plugin
const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require("path")
module.exports = {
context: __dirname+"/src",
entry: "./index.js",
output: {
filename: "./dist/bundle.js",
path: __dirname
},
plugins: [
...,
new ExtractTextPlugin("./dist/bootstrap.css", {
allChunks: true
})
],
module: {
loaders: [
...,
// your css loader excluding bootstrap
{
test: /\.css$/,
loader: "style!css",
exclude: [
path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
]
},
{
// loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute
include: [
path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
],
loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize")
}
]
}
}
Надеюсь, это поможет вам
Я страдаю той же проблемой в IE 10.0. Я знаю, что это не совсем проблема в ОП, но, возможно, это будет полезно для других.
В моем случае у меня была пустая строка в начале документа:
[blank line]
<!DOCTYPE html>
<html lang="es">
...
Если между DOCTYPE и тегом находится пустая строка, проблема также отображается:
<!DOCTYPE html>
[blank line]
<html lang="es">
После того как я удалил пустую строку и без волшебной мета X-UA-Compatible, IE 10 начал правильно отображать сайт.
Если вы используете PHP и Smarty, будьте осторожны с комментариями Smarty, потому что они добавят эти проблемные пустые строки:-)
Я решил следующие шаги.
(1) установлен модуль Respond.js для drupal 7.
(2) модуль lessphp для drupal 7 установлен в библиотеках вместо папки модуля. (3) (3.1)<meta http-equiv="X-UA-Compatible" content="IE=edge">
(3.2)
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
используя загрузчик cdn из настроек темы.
Чтобы узнать больше, просмотрите мой блог на сайте, посвященный дизайну и разработке http://www.devangsolanki.com/
Убедитесь, что вы связываете источник начальной загрузки отдельно
Если вы используете LESS или же SASS не жадничайте с компиляцией стилей. В мой проект я включил bootstrap.min.css в моем основном стиле, в верхней части файла - поэтому для всех стилей должен быть только один запрос.
И из-за этого классы Boostrap не работали должным образом. При добавлении отдельно работает как положено.