Question

我尝试在bootstrap模态窗口中创建一个简单的表单。在现代浏览器中一切正常，但IE8在页面底部显示模态窗口的空容器。截图：

screenshot

模态窗口代码放在关闭标记

之前

以下是代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Test Page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="/js/jquery-1.11.1.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/js/validator/bootstrapValidator.min.js"></script>
        <script type="text/javascript" src="/js/date-picker/moment.js"></script>
        <script type="text/javascript" src="/js/date-picker/bootstrap-datetimepicker.js"></script>
        <script type="text/javascript" src="/js/date-picker/bootstrap-datetimepicker.ru.js"></script>
        <script type="text/javascript" src="/js/validators.js"></script>
        <link href="/css/inner.css" rel="stylesheet" /> 
        <link rel="stylesheet" href="/css/validator/bootstrapValidator.min.css"/>
        <link rel="stylesheet" type="text/css" media="screen" href="/css/date-picker/bootstrap-datetimepicker.css" />       
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>

    <div class="top_inner center-block">

    </div>
    <div class="page-content center-block">

        <div class="row main_text">
              <h1>Page title</h1>
            <div class="news-text media">
                <div class="media-body">
                  ...main content...
                </div>
            </div>
        </div>

        <div class="clearfix"></div>
    </div>

    <div class="footer_container page-content center-block">
        <div class="footer">

            ...footer...

        </div>
    </div>  

    <div class="order-modal modal fade" id="orderModal">
    <form action="/orders/" method="POST" id="orderModalForm">
      <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">Order</h4>
          </div>
          <div class="modal-body">

            ...

            <div class="form-group">
                <label for="order_phone">Phone <span class="required">*</span></label>
                <div class="input-group input-group-lg">
                    <div class='input-group'>
                        <input type='text' class="form-control" name="order_phone" id="order_phone" />
                        <span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span>
                    </div>          
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <input type="submit" class="btn btn-primary" name="orderSubmit" value="Send" />
          </div>
        </div>
      </div>
      </form>
    </div>


    </body>
</html>

Answer 1

它是IE浏览器中的错误，请在Bootsrap css类中添加以下代码，

.modal-content {
background-clip: border-box;
border: none !important;
}

Bootstrap模态：IE8显示空模态窗口的边框

1 个答案: