由于垂直对齐的 div，内容未在 IE 中显示答案

【问题标题】：Content not showing in IE due to vertically aligned div由于垂直对齐的 div，内容未在 IE 中显示
【发布时间】：2015-06-09 19:54:44
【问题描述】：

您好，我正在为我的网站制作维护页面。我在 asp.net MVC 中使用 app_offline 页面。通过使用浏览器的语言设置，我设法在没有后端的情况下处理翻译。我遇到的问题是我正在使用引导程序，并且我在页面上居中显示了维护消息，但是内容不会显示在 IE 中，但它在 Chrome 和 Firefox 中一如既往地工作正常。我认为是我的 css 导致了这个问题，但我不确定我花了足够长的时间来让垂直中心正常工作。我已经包含了下面的 html 和 css 以及工作页面的小提琴。

JSFIDDLE：here

HTML：

<body>
<nav class="navbar navbar-fixed-top">
    <div class="container-fluid">
        <div class="Logo"></div>
    </div>
</nav>
<div class="container">
    <div class="jumbotron vertical-center">
            <h1><span class="sRed">
            <ul class="text">
                <li class="en active"><i class="fa fa-exclamation-triangle fa-lg"></i>Maintenance Mode</li>
                <li class="fr"><i class="fa fa-exclamation-triangle fa-lg"></i>Mode maintenance</li>
                <li class="es"><i class="fa fa-exclamation-triangle fa-lg"></i>Modo de mantenimiento</li>
                <li class="nl"><i class="fa fa-exclamation-triangle fa-lg"></i>Maintenance Mode</li>
                <li class="pt_BR"><i class="fa fa-exclamation-triangle fa-lg"></i>Modo de Manutenção</li>
                <li class="pt_PT"><i class="fa fa-exclamation-triangle fa-lg"></i>Modo de Manutenção</li>
                <li class="de"><i class="fa fa-exclamation-triangle fa-lg"></i>Wartungsmodus</li>
            </ul>
        </span></h1>

        <ul class="text">
            <li class="en active">
                <h3>Site is currently undergoing scheduled maintenance. We will be back very shortly. Sorry for the inconvenience!</h3>
            </li>
            <li class="fr">
                <h3>Site est actuellement en cours de maintenance . Nous serons de retour très bientôt.</h3>
            </li>
            <li class="es">Site se encuentra actualmente en mantenimiento programado. Volveremos muy pronto.</li>
            <li class="nl">Site ondergaat momenteel gepland onderhoud . We zullen weer zeer binnenkort .</li>
            <li class="pt_BR">Site está passando por manutenção programada. Estaremos de volta em breve.</li>
            <li class="pt_PT">Site está passando por manutenção programada. Estaremos de volta em breve.</li>
            <li class="de">Site wird derzeit Wartungsarbeiten durchgeführt. Wir werden sehr bald wieder kommen.</li>
        </ul>
    </div>
</div>

CSS：

    html, body {
    height: 100%;
    margin: 0 auto;
    background-color: white;
    font-family:"Verdana", Geneva, sans-serif;
}
.sRed {
    color: black;
}
u {
    color: #008854;
}
.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
}
.Logo {
    background-color: White;
    border-bottom: 10px solid #cce6da;
    border-top: 6px solid #32353E;
    height: 66px;
}
.jumbotron {
    position: absolute;
    top: 50%;
    left:50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: white;
}
li {
    display: none;
}
li.active {
    display: initial;
}
.fa-exclamation-triangle {
    color: #008854;
    padding-right: 18px;
}

再次感谢您的帮助。

【问题讨论】：

你用的是哪个IE版本？
我使用的是 IE 8 及以上版本

标签： html css asp.net twitter-bootstrap internet-explorer-8

【解决方案1】：

IE8 不支持 CSS3 和一些 Bootstrap 功能尝试将您的浏览器升级到 IE 9、10、11

或者也可以在这里搜索哪个浏览器版本支持哪个功能。

http://caniuse.com/

在 IE8 中运行使用：html5shiv.js 和 respond.min.js。

HTML5 Shiv HTML5 Shiv 支持在旧版 Internet Explorer 中使用 HTML5 分段元素，并为 Internet Explorer 6-9、Safari 4.x（和 iPhone 3.x）和 Firefox 3.x 提供基本的 HTML5 样式。

Respond.min.js 该脚本的目标是提供一个快速且轻量级（3kb 压缩/1kb gzipped）的脚本，以在不支持 CSS3 媒体查询的浏览器（尤其是 Internet Explorer 8 及更低版本）中启用响应式网页设计。

还阅读此引导浏览器支持：http://getbootstrap.com/getting-started/#support

【讨论】：