Столбец полной ширины в IE 8 - Css bootstrap

Я использую bootstrap 3.0.3 на своей веб-странице и добавляю html5shiv lib и отвечаю за lib, чтобы исправить это, но он не работает в Internet explorer 8.

мой html-код:

<div class="container">
    <div class="row">
        <div class="col-sm-4" style="background:red;">&nbsp;</div>
        <div class="col-sm-4" style="background:green;">&nbsp;</div>
        <div class="col-sm-4" style="background:blue;">&nbsp;</div>
    </div>
</div>

Сработало хорошо в браузерах FF и Webkits, но в результате IE:

enter image description here

Теперь демо здесь, как я могу его исправить?

Ответы

Ответ 1

На основе решения в потоке: Должны ли элементы контейнера Bootstrap включать элементы строки?, ваша разметка должна быть:

<div class="container">
    <div class="row">
        <div class="col-sm-4" style="background:red;">&nbsp;</div>
        <div class="col-sm-4" style="background:green;">&nbsp;</div>
        <div class="col-sm-4" style="background:blue;">&nbsp;</div>
    </div>
</div>

и используйте этот CSS для его достижения в IE8:

.container
{
    display:table;
    width: 100%;
}

.row
{
    height: 100%;
    display: table-row;
}
.col-sm-4
{
    display: table-cell;
}

здесь работает демо

Класс .row не требуется внутри .container, но если вы включите его, контейнеp > строка - это порядок не строки > контейнер (который вы кодируете)!

ИЗМЕНИТЬ

Возможно, стоит отметить, что respond.js работает только для локальных файлов. Поэтому, если у вас есть файлы css bootstrap из CDN для вашего сайта в IE8, это не сработает, вместо этого попробуйте с локальной копией bootstrap.css

Internet Explorer 8 и Respond.js

Остерегайтесь следующих предостережений при использовании Respond.js в вашем среды разработки и производства для Internet Explorer 8.

Respond.js и междоменный CSSИспользование Respond.js с CSS, размещенное в другом (под) домене (для например, на CDN) требует некоторой дополнительной настройки. См. Respond.js docs для деталей.

Respond.js и файл://Из-за правил безопасности браузера Respond.js не работает со страницами просматривается через файл://protocol (например, при открытии локального HTML файла). Чтобы проверить отзывчивые функции в IE8, просмотрите свои страницы через HTTP (S). Видеть в документах Respond.js.

Respond.js и @importRespond.js не работает с CSS, который ссылается через @import. В в частности, некоторые конфигурации Drupal, как известно, используют @import. Видеть в документах Respond.js.

Режимы совместимости IEBootstrap не поддерживается в старой совместимости с Internet Explorer режимы. Чтобы убедиться, что вы используете последний режим рендеринга для IE, подумайте о включении соответствующего тега в свои страницы:

Источник: Getbootstrap

Ответ 2

Если "отзывчивость" не требуется, вы можете использовать классы col-xs- * вместо настройки прокси для response.js. Он работает, потому что классы col-xs- * являются медиа-агностиками. Он решил проблему в моем случае.

Ответ 3

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

Применить правила CSS, если браузер IE

Ответ 4

Дополнение, что вам нужно помнить, что bootstrap.css находится выше response.js в вашем разделе:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Mobile viewport optimisation -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap example</title>

    <noscript>
        <link rel="stylesheet" href="../assets/css/noscript.css" />
    </noscript>

    <!-- Bootstrap -->
    <link href="../assets/bootstrap-3.3.5/dist/css/bootstrap.css" rel="stylesheet">

    <!--[if lte IE 8]>
    <script src="../assets/js/ie/es5-shim.min.js"></script>
    <script src="../assets/js/ie/es5-sham.min.js"></script>
    <script src="../assets/js/ie/html5shiv.js"></script>
    <script src="../assets/js/ie/respond.min.js"></script>
    <![endif]-->
</head>