Html 由于垂直对齐的div，IE中未显示内容_Html_Css_Asp.net_Twitter Bootstrap_Internet Explorer 8

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

html css asp.net twitter-bootstrap internet-explorer-8

Html 由于垂直对齐的div，IE中未显示内容,html,css,asp.net,twitter-bootstrap,internet-explorer-8,Html,Css,Asp.net,Twitter Bootstrap,Internet Explorer 8,嗨，我正在为我的网站维护页面工作。我正在asp.net MVC中使用app_脱机页面。通过使用浏览器语言设置，我成功地在没有后端的情况下处理翻译。我遇到的问题是，我正在使用bootstrap，我在页面上居中放置了一个jumbotron来显示维护消息，但是内容在IE中不显示，但在Chrome和Firefox中仍然可以正常工作。我认为这是我的css造成的问题，但我不确定它花了我足够长的时间让垂直中心工作。我已经包括了下面的html和css以及一些工作页面 JSFIDDLE： HTML: 再次感谢您的

嗨，我正在为我的网站维护页面工作。我正在asp.net MVC中使用app_脱机页面。通过使用浏览器语言设置，我成功地在没有后端的情况下处理翻译。我遇到的问题是，我正在使用bootstrap，我在页面上居中放置了一个jumbotron来显示维护消息，但是内容在IE中不显示，但在Chrome和Firefox中仍然可以正常工作。我认为这是我的css造成的问题，但我不确定它花了我足够长的时间让垂直中心工作。我已经包括了下面的html和css以及一些工作页面

JSFIDDLE：

HTML:

再次感谢您的帮助。

IE8不支持CSS3和一些引导功能，请尝试将浏览器升级到IE 9、10、11

或者也可以在此搜索支持哪个浏览器版本的功能

要在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 gzip脚本，以便在不支持CSS3媒体查询的浏览器（特别是Internet Explorer 8及以下版本）中实现响应性web设计

另请阅读此引导浏览器支持：

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

<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>

    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;
}