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は非常に標準に準拠しているようで、テキストと画像を美しくレンダリングして起動します。IE地獄のあと2〜3年、私たちは新しい黄金時代になります。

于 2013-01-16T21:36:59.523 に答える