2

我对 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 中： 在此处输入图像描述

4

1 回答 1

2

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

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

于 2013-01-16T21:36:59.523 回答