Twitter Bootstrap 弹出框不适用于 IE9答案

【问题标题】：Twitter Bootstrap popover not working with IE9Twitter Bootstrap 弹出框不适用于 IE9
【发布时间】：2012-11-22 11:46:58
【问题描述】：

我对 twitter 引导弹出框有疑问。我已经下载并安装了最新的包 (twitter-bootstrap-v2.2.0-2-g3b3dd3a) 我做了一个简单的 html 页面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Twitter Bootstrap Popover with placement option Example</title>
    <meta name="description" content="Creating Modal Window with Twitter Bootstrap">
    <link href="twitter-bootstrap/docs/assets/css/bootstrap.css" rel="stylesheet">
    <style> a { margin-left : 400px; } </style>
  </head>
  <body>
    <div class="container">
      <h2>Example of creating Popover with Twitter Bootstrap with placement option</h2>
      <div class="well">
        <a href="#" id="example" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltip for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
      </div>
      <div class="well">
        <a href="#" id="example_left" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
      </div>
      <div class="well"> <a href="#" id="example_top" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a> </div>
      <div class="well"> <a href="#" id="example_bottom" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a> </div>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="twitter-bootstrap/js/bootstrap-tooltip.js"></script>
    <script type="text/javascript" src="twitter-bootstrap/js/bootstrap-popover.js"></script>
    <script type="text/javascript"> $(function () { $("#example").popover(); $("#example_left").popover({placement:'left'}); $("#example_top").popover({placement:'top'}); $("#example_bottom").popover({placement:'bottom'}); });
    </script>
  </body>
</html>

问题在于，使用 IE9 时，按钮的格式不正确，而在 Chrome 中它们看起来还不错

它们在 IE9 中的显示方式如下：

在 Chrome 中：

【问题讨论】：

你说的是按钮的位置，还是整体的外观？后者在 IE 中可能无法真正修复。

标签： twitter-bootstrap internet-explorer-9 popover

【解决方案1】：

这与弹出框无关，而是与糟糕的浏览器标准合规性有关。 IE9 本身并不支持 Bootstrap 使用的所有 CSS 属性。我在使用 CSS3PIE 来帮助解决这个问题上取得了一些成功。 http://css3pie.com

好消息是 IE10 似乎非常符合标准，它可以很好地呈现文本和图像以启动。再过 2-3 年的 IE 地狱，我们将进入一个新的黄金时代。

【讨论】：

是的。再过2-3年，我们将进入一个新的黄金时代，希望大家快点升级到IE11。