動的コンテンツでのレスポンスグリッドレイアウトの問題（IE 11の問題のみ）

-2

レスポンスグリッドの動的コンテンツを生成する際に、ブートストラップ4ベータ版を使用してレイアウトの問題が発生しました。すべてのブラウザはIE 11（Edgeの動作は問題ありません）以外は正常に動作しているようです。動的コンテンツでのレスポンスグリッドレイアウトの問題（IE 11の問題のみ）

レイアウトを静的に保つと、everything looks smooth as shown belowここには bootply codeとなります。

ここでデータを動的に生成してdivに書き込むと、レイアウトIE 11に問題が発生し始めます。ここにはbootply codeがあります。

すべてのものは、Firefox、Chromeとエッジでうまく機能していますが、唯一のコードサンプルを追加しIE 11

と問題の表示を開始、あなたはIE11で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() 
     { 
      $('#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/[email protected]/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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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/[email protected]/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>

出典

2017-11-10 LEE

明日は変更または消滅して今後誰も助けることのできない他のサードパーティのサービスではなく、ここに問題を示すマークアップの完全で最小限の例を投稿する必要があります：[mcve]解決しようとしている問題の説明。 – Rob

さてさて、どこでも、私は一種の線でCSSラインをデバッグすることで考え出した上で何の助けを見つけない後。は一度

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

（少なくとも私の最大の関心事だったIE11、ために）離れて行くとのdivにクラス「inblock_issue」を追加することを忘れないでください、ヘッダーの問題でこれを追加しました。

出典

2017-11-13 11:04:45 LEE

動的コンテンツでのレスポンスグリッドレイアウトの問題（IE 11の問題のみ）

答えて

関連する問題