IE 7/8 渲染问题？答案

【问题标题】：IE 7/8 rendering issue?IE 7/8 渲染问题？
【发布时间】：2015-04-28 14:23:57
【问题描述】：

在 ie8 中，文档按预期呈现。

在ie7中，文件不是

（建立在带有额外 css 的引导程序之上）

标记：

.modal.fade.in#unsupported-browser-modal
  .modal-dialog
    .modal-content
      .modal-text
        .modal-header
          %h3.modal-title YOUR BROWSER IS OUT OF DATE
        .modal-body
          This website requires a minimum of Internet Explorer version 9 or the latest version of other popular web browsers.

附加CSS：

#unsupported-browser-modal {

  .modal-dialog, .modal-content {
    height: 100%;
  }

  .modal-dialog {
    width: 100%;
    margin: 0;
    max-width: none;
    min-width: none;
  }

  .modal-content {
    border-bottom: 0;
  }

  .modal-header {
    border-bottom: 0;
    padding: 15px;
    min-height: 16.42857143px;
  }

  .modal-title {
      font-family : $var;
      text-align     : center;
      font-weight    : bold;
      letter-spacing : 2px;
      margin-top: 50px;
  }

  .modal-body {
    font-family: $var1;
    font-size: 14px;
    text-align: center;
    padding: 2px 35px 80px;
    color: #646464;
    line-height: 20px;
  }
}

#unsupported-browser-modal.modal {
  display: block;
}

.modal-text {
  top: 37%;
  position: relative;
}

此外，在 ie7 和 i8 中 document.compatMode 似乎设置为相同的值，以防万一。

关于我可能没有考虑到的想法？

【问题讨论】：

在 JSFiddle 或其他东西中抛出标记/css。
codepen.io/ahcarpenter/pen/oXgQdP @MathiasaurusRex，非常感谢您的关注！
尝试添加html, body { height: 100%; margin: 0; }。 codepen.io/anon/pen/eNmQbG
讽刺的是codepen在IE7中不工作
@HiddenHobbes 无济于事，但我非常感谢这个建议！

标签： css twitter-bootstrap internet-explorer-8 internet-explorer-7 haml

【解决方案1】：

不确定它是否是您要找的。这也是一个 hack，所以我不会建议它，除非没有人建议解决方案/您找不到解决方案。但是试试：

_margin-top: 100px; /* ie7 only */

如果您有兴趣，可以在这里阅读更多关于安全 CSS hack 的信息：https://mathiasbynens.be/notes/safe-css-hacks#css-hacks

【讨论】：

希望确保文本在响应式布局中垂直和水平居中