[英]IE9 not rendering [display: table] CSS correctly?
我有一个正在使用Bootstrap的MVC 4应用程序。 应用程序标头的一部分是典型的用户名和密码字段,带有登录按钮和记住我的选择。
在Chrome中,所有内容均可正确呈现:
但是在IE9中,我看到了:
HTML:
<div class="col-md-6 box">
@if (User.Identity.IsAuthenticated)
{
<div class="profileLinks">
<a href="@organizationUrl">My Organizational Profile</a>
|
<a href="@userProfileUrl">My Profile</a>
</div>
<div class="content logout">
<div class="row">
<div>
Hi, @User.Identity.Name
@Html.ActionLink("Log Off", "LogOff", "Account", new {},new { @class = "btn btn-primary btn-sm" })
</div>
</div>
</div>
}
else
{
<div class="content">
<div class="row">
<div class="col-md-4">
<input type="text" id="username" placeholder="E-mail" required tabindex="1"/>
<a href="#" ><h6>Forgot your username?</h6></a>
</div>
<div class="col-md-4">
<input type="password" id="password" placeholder="Password" required tabindex="2" onkeyup="EnterKeyPressed()"/>
<a href="#" ><h6>Forgot your password?</h6></a>
</div>
<div class="col-md-4">
<input type="button" id="loginButton" value="Login" onclick="login()" class="btn btn-primary btn-sm" tabindex="3" onkeyup="EnterKeyPressed()"/>
<br />
<input type="checkbox" id="rememberMe">Remember Me
</div>
</div>
</div>
}
</div>
CSS:
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
据我所知,IE9似乎与bootstrap.css
的.row
类有关。 有人对我如何将IE9中的呈现方式与Chrome的呈现方式进行匹配以使用户名 , 密码和登录按钮字段都位于同一“ row
”上有一些想法吗?
我发现通过添加以下内容,一切都可以按照我在IE,Chrome和Firefox中的期望进行渲染:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
IE=edge
以可用的IE最新版本运行页面。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.