IE9 不能正确渲染 [display: table] CSS？答案

【问题标题】：IE9 not rendering [display: table] CSS correctly?IE9 不能正确渲染 [display: table] CSS？
【发布时间】：2014-03-25 05:18:53
【问题描述】：

我有一个使用 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 的渲染有一些想法，使用 Username、Password 和 Login Button字段都在相同的相应“row”上？

【问题讨论】：

您可能需要使用一个实际的表格来让您的代码在所有浏览器上运行。 :(
是的。或者至少有一个可以变成表格元素的 DOM 树（table、table-row、table-cell）。您希望通过创建除了一个空格之外什么都没有的表格来实现什么？
Chrome 可能会以一种让您满意的方式显示此内容，而 IE 则不会，但这不能算作“正确呈现”。你所拥有的没有正确的表格，也没有正确的方法来呈现不正确的东西。
@MrLister，你在上面说得很好。我找到了解决方案，很快就会发布。

标签： html css asp.net-mvc-4 twitter-bootstrap cross-browser

【解决方案1】：

我发现通过添加以下内容，在 IE 以及 Chrome 和 Firefox 中一切都按照我的意愿呈现：

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

IE=edge 在可用的最新版本 IE 中运行页面。

【讨论】：