Question

我正在使用bootstrap 4 beta并在为响应网格生成动态内容时遇到布局问题。所有浏览器似乎都能正常工作，除了IE 11（Edge工作得很好）。

如果我保持布局静态，everything looks smooth as shown below就在这里 bootply code

现在，如果我将其更改为动态生成数据并填写div，则会在布局IE 11中开始向我提出问题，此处为bootply code。

在Firefox，Chrome和Edge中，每件事情都运行得很好但只是开始显示IE 11的问题。

添加代码示例，您可以将这些文件保存为html并在IE11中进行测试，您将看到问题。

静态代码示例

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   
    <script>
        function openWindow()
        {
            $('#myModal').modal({show:true})
        }
        </script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
    <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" crossorigin="anonymous"></script>     
</head>
<body>
    <a class="btn btn-default" id="openBtn" href="#" onclick="openWindow();">Open modal</a>

    <div tabindex="-1" class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-body">
          <h4 class="g-mb-10 g-color-primary g-font-weight-600 text-capitalize">Company Name INC. <span class="h5 g-color-black">123343244</span></h4><div><div class="row"><div class="col-xl-12 col-xs-12 g-mb-15"><ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13"><li class="media"><i class="d-flex mt-1 mr-3 icon-hotel-restaurant-235 u-line-icon-pro"></i><div class="media-body">68 SOME AREA ST, QUEENS, NY, 11345 - 6345, United States</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-001 u-line-icon-pro"></i><div class="media-body">http://www.microsoft.com</div></li></ul></div></div><div class="row"><div class="col-xl-6 col-lg-6 col-md-12 col-xs-12 g-mb-5"><ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13"><li class="g-color-black g-font-weight-600 text-capitalize">Bill CLINTON</li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-033 u-line-icon-pro"></i><div class="media-body">800 852 3543</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-155 u-line-icon-pro"></i><div class="media-body">800 852 3543</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-062 u-line-icon-pro"></i><div class="media-body">support@microsoft.com</div></li></ul></div><div class="col-xl-6 col-lg-6 col-md-12 col-xs-12 g-mb-5"><ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13"><li class="g-color-black g-font-weight-600 text-capitalize">Bill CLINTON</li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-033 u-line-icon-pro"></i><div class="media-body">800 852 3543 ext 205</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-155 u-line-icon-pro"></i><div class="media-body">800 852 3543</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-062 u-line-icon-pro"></i><div class="media-body">support@microsoft.com</div></li></ul></div></div></div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button>
        </div>
        </div>
    </div>
    </div>
<body>
</html>

动态代码示例

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   
    <script>
        function openWindow()
        {
          $('#innerData').html('<h4 class="g-mb-10 g-color-primary g-font-weight-600 text-capitalize">Company Name INC. <span class="h5 g-color-black">123343244</span></h4><div><div class="row"><div class="col-xl-12 col-xs-12 g-mb-15"><ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13"><li class="media"><i class="d-flex mt-1 mr-3 icon-hotel-restaurant-235 u-line-icon-pro"></i><div class="media-body">68 SOME AREA ST, QUEENS, NY, 11345 - 6345, United States</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-001 u-line-icon-pro"></i><div class="media-body">http://www.microsoft.com</div></li></ul></div></div><div class="row"><div class="col-xl-6 col-lg-6 col-md-12 col-xs-12 g-mb-5"><ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13"><li class="g-color-black g-font-weight-600 text-capitalize">Bill CLINTON</li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-033 u-line-icon-pro"></i><div class="media-body">800 852 3543</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-155 u-line-icon-pro"></i><div class="media-body">800 852 3543</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-062 u-line-icon-pro"></i><div class="media-body">support@microsoft.com</div></li></ul></div><div class="col-xl-6 col-lg-6 col-md-12 col-xs-12 g-mb-5"><ul class="list-unstyled g-color-gray-dark-v5 g-font-size-13"><li class="g-color-black g-font-weight-600 text-capitalize">Bill CLINTON</li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-033 u-line-icon-pro"></i><div class="media-body">800 852 3543 ext 205</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-155 u-line-icon-pro"></i><div class="media-body">800 852 3543</div></li><li class="media"><i class="d-flex mt-1 mr-3 icon-communication-062 u-line-icon-pro"></i><div class="media-body">support@microsoft.com</div></li></ul></div></div></div>');

            $('#myModal').modal({show:true})
        }
        </script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
    <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" crossorigin="anonymous"></script>     
</head>
<body>
    <a class="btn btn-default" id="openBtn" href="#" onclick="openWindow();">Open modal</a>

    <div tabindex="-1" class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-body">
          <label id="innerData"/>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button>
        </div>
        </div>
    </div>
    </div>
<body>
</html>

Answer 1

好吧，在任何地方找不到任何帮助之后我都会通过逐行调试css来解决这个问题。一旦添加此标题问题就会消失（至少对IE11而言，这是我主要关注的问题）

<style>
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     .inblock_issue{display:block;}
}   
</style>

并且不要忘记添加课程＆＃34; inblock_issue＆＃34;到div。

动态内容的响应式网格布局问题（仅限IE 11问题）

1 个答案: