IE9無法正確渲染[display：table] CSS嗎？

Question

我有一個正在使用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 ”上有一些想法嗎？

Answer 1

我發現通過添加以下內容，一切都可以按照我在IE，Chrome和Firefox中的期望進行渲染：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IE=edge以可用的IE最新版本運行頁面。