Question

IE对我来说是一个谜。我的网络应用程序正在开发Safari，Firefox，Chrome，甚至是iPhone和iPad，但是当谈到IE时，我根本无法理解遵守给定标准的难度。无论如何足够咆哮。

我的Twitter引导按钮在IE8中完全被忽略。当我点击任何按钮时，绝对没有任何反应。我在谷歌上找不到任何东西，有没有人碰到过这个？

非常感谢，

Answer 1

@Kave您只将简单的html上传到jsfiddle - 其中包含js的链接，这些链接不存在（所以当没有附加js时很难调试它）..

尝试使用href而不是那么多按钮.. twitter bootsrap支持链接样式看起来像按钮，例如在twitter bootstrap的第一页，如下所示:(源代码复制和修改后的位置）：

<a class="btn btn-success btn-large" href="http://twitter.github.com/bootstrap/base-css.html">Example link with button styles</a>

编辑：或者，使用twitter bootstrap的完整示例（从演示模板修改 - 链接英雄单位内的按钮样式） - copy＆amp;粘贴到文件，保存为testing.html并使用浏览器打开 - 享受！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="http://getbootstrap.com/2.3.2/assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-57-precomposed.png">
  </head>

  <body>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span12">
          <div class="hero-unit">
            <h1>Hello, world!</h1>
            <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
            <p><a class="btn btn-success btn-large" onclick="alert('its working :)')">Learn more &raquo;</a></p>
          </div>
        </div>
      </div>

      <hr>

      <footer>
        <p>&copy; Company 2012</p>
      </footer>

    </div><!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-alert.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-popover.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-button.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-collapse.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
    <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>

如果仍然无法正常工作，请确保在重新启动IE时单击“允许阻止的内容”，如果弹出询问它，则会显示。

Answer 2

允许阻止内容引用javascript内容，按钮是纯粹的CSS代码，问题是IE 6 .... 8对CSS3没有很好的支持。如果你看看getbootstrao.com网站，你没有看到他们使用自己的按钮:)）最好的解决方案是使用简单的CSS创建按钮，如果有人使用IE浏览您的网站，他们可能看不到边框半径效果，但他们会找到实际的方形但工作按钮。

Answer 3

我遇到了同样的问题并使用这个jQuery / js解决了它：

<a href="http://www.example.com">
<button class="btn"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Button text</button>
</a>

<!--[if lt IE 9]>

<script>
$(".btn").click(function() {
        var t = $(this).parent();
        window.location.href = t.attr("href");
});
</script>

<!--[if lt IE 9]>

Twitter引导按钮在IE8中没有响应

3 个答案: