I have an MVC 4 application that is using Bootstrap. Part of the Header on the application is your typical Username and Password fields with a Login button and Remember Me Selection.
In Chrome everything renders correctly:
But in IE9 I see this:
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;
}
As best I can tell, IE9 seems to be having some sort of issue with the .row
class from bootstrap.css
. Does anyone have some ideas for how I might fix the rendering in IE9 to match that of Chrome, with the Username , Password , and Login Button fields all on the same respective " row
"?
I found that by adding the following, everything was rendering as I desired in IE, as well as Chrome and Firefox:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
IE=edge
runs the page in the most up to date version of IE available.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.