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

【问题标题】：Responsive Grid layout issue with Dynamic content (issue with IE 11 only)动态内容的响应式网格布局问题（仅限 IE 11 问题）
【发布时间】：2017-11-13 19:04:45
【问题描述】：

我正在使用 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>

【问题讨论】：

您需要在此处发布显示问题的完整且最小的标记示例，而不是任何其他可能明天更改或消失的第三方服务，将来不会帮助任何人：minimal reproducible example它应该包含对您要解决的问题的清晰描述。

标签： twitter-bootstrap internet-explorer-11 bootstrap-4

【解决方案1】：

好吧，在我通过逐行调试 css 找到的任何地方都找不到帮助之后。一旦在标题中添加这个问题就会消失（至少对于 IE11，这是我最关心的问题）

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

并且不要忘记将类“inblock_issue”添加到 div。

【讨论】：