Question

我有一个bootstrap弹出登录页面wghich在谷歌Chrome上工作正常，但在IE10中没有。我的意思是问题是当你点击关闭按钮时，它应该通过移动页面顶部变得不可见。它适用于谷歌浏览器，但IE10，没有运气

这是源html和脚本

 <meta http-equiv="X-UA-Compatible" content="IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"
    rel="stylesheet">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

html side

<div id="form-content" class="modal hide fade in" style="display: none; margin-top: 140px;">

        <form id="form">
            <div class="form-group">
                <label class="control-label" for="username">
                    User Name:</label>

                <div class="input-group">
                    <input class="form-control" type="text" id="txtUsername" name="username">*
                </div>
            </div>
            <div class="form-group">
                <label class="control-label" for="password">
                    Password:</label>
                <div class="input-group">
                    <input class="form-control" type="text" id="txtPassword" name="password">*
                </div>
                <span id="spanErrorMessage" style="color: Red; display: none;">Invalid username or password.</span>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" type="submit" id="btnLogin">
                    Sign Up</button>
                <a href="#" class="btn" data-dismiss="modal">Close</a>
            </div>
        </form>
        <div id="dialog" title="Message" style="z-index: 9999;">
        </div>
    </div>

任何帮助表示赞赏。

谢谢..

Answer 1

IE 10上的Bootstrap模式存在一个已知问题：See Here

如果你从模态元素中删除'fade'类，它应该可以工作。

更新的
您可以尝试使用jQuery，因此它只会影响Internet Explorer：

$(document).ready(function(){
   if ($.browser.msie  && parseInt($.browser.version, 10) > 8) {
     $("#form-content").removeClass(".fade"); 
   } 
});

Answer 2

扩展Razvan的解决方案，如果你想修补IE10的所有元素的bootstrap-modal功能，你可以使用这样的东西：

(function($){
    if ($.browser.msie && parseInt($.browser.version, 10) == 10) {
        if (typeof $.fn.modal === 'function') {
            var ogModal = $.fn.modal;
            $.fn.modal = function(options) {
                if (options === 'show') {
                    this.removeClass('fade');
                }
                ogModal.apply(this, arguments);
            }
        }
    }
})(jQuery);

IE10上的Bootstrap兼容性问题

2 个答案: