jQuery Bootstrap适用于Firefox,但不适用于IE

时间:2014-10-22 13:29:51

标签: jquery twitter-bootstrap internet-explorer firefox

为什么jQuery和Bootstrap在Firefox中工作但是当我在IE中打开同一页面时没有任何作用?呃有人可以解释一下,当发生这种情况时你必须做些什么吗?你必须为每个浏览器编写单独的代码?我甚至不知道从哪里开始如何在一个浏览器中工作而不是另一个浏览器呢?

http://jsfiddle.net/znnm74d5/

此示例适用于Firefox,但不适用于IE

<select name="SPECIAL" id="SPECIAL">
  <option>Please Select</option>
    <option data-name="Animal Friend" data-img="/images/img/AnimalFriend.png" data-price="$30" value="1">Animal Friend</option>
    <option data-name="Aquaculture" data-img="/images/img/Aquaculture.png" data-price="$30" value="2">Aquaculture</option>
    <option data-name="Protect Our Oceans" data-img="/images/img/ProtectOurOceans.png" data-price="$30" value="3">Protect Our Oceans</option>
    <option data-name="Conserve Wildlife" data-img="/images/img/ConserveWildlife.png" data-price="$30" value="4">Conserve Wildlife</option>
</select>
<!-- Modal -->
<div class="modal fade" id="modal_special" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Specialty Plate</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary accept">Accept</button>
      </div>
    </div>
  </div>
</div>

$(function() {
        $('#SPECIAL').on('change', function() {
            if ($('option:selected', this).is('[data-img]')) {
                $('#modal_special').find('.modal-body').html('<p>Image will go here:</p>')
                .append('<img alt="coming soon" src="' + $('option:selected', this).data('img') + '"/>')
                .end().modal('show');
            }
        });
        $('.accept').on('click',function() {
            //do something
            $('#modal_special').modal('hide');
        });
    });

2 个答案:

答案 0 :(得分:2)

没有Bootstrap或IE版本的开放式问题。

虽然值得注意的是最新的Bootstrap版本不支持IE7及以下版本。此外,如果您想要支持IE8 / 9,则需要添加其他库,例如Respond.js

Boostrap文档中有一整节涉及浏览器支持和您需要采取的一切措施,以使所有内容顺利运行。

http://getbootstrap.com/getting-started/#support-ie8-ie9

http://getbootstrap.com/getting-started/#support-ie8-respondjs

答案 1 :(得分:1)

鉴于您在问题中提供的信息很少,最明显的行为来源是IE的过时版本(8或更少)。 (请参阅Bootstrap-docs)中的浏览器支持

如果有,请尝试在您的网站中加入Respond.js。如果这不能解决问题,我强烈建议您在问题中提供更多信息。