2

IE对我来说是个谜。我的 Web 应用程序可以在 Safari、Firefox、Chrome 甚至 iPhone 和 iPad 上运行，但对于 IE，我根本无法理解遵守给定标准的难度。反正吐槽就够了。

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

非常感谢，

4

3 回答 3

5

@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 的完整示例（从演示模板修改 - 与英雄单元内的按钮样式链接） - 复制并粘贴到文件，保存为 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 时单击“允许阻止的内容”，如果弹出询问它。

于 2012-08-20T18:24:02.857 回答
0

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

于 2014-12-10T10:14:05.543 回答
0

我遇到了同样的问题并使用这个 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]>
于 2015-08-26T11:21:46.040 回答