Question

您好我正在为我的网站维护页面。我在asp.net MVC中使用app_offline页面。我已经设法通过使用浏览器语言设置来处理没有后端的翻译。我遇到的问题是我正在使用bootstrap，我已经在页面上集中了一个jumbotron来显示维护消息，但是内容没有在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;
}

再次感谢您的帮助。

Answer 1

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

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

http://caniuse.com/

在IE8中运行它使用：html5shiv.js AND 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媒体查询的浏览器中启用响应式Web设计 - 特别是Internet Explorer 8及以下版本。

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

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

1 个答案: