IE 11 根本不显示任何内容答案

【问题标题】：IE 11 Not displaying anything at allIE 11 根本不显示任何内容
【发布时间】：2019-09-04 04:36:51
【问题描述】：

以下代码可在除 EI11 之外的所有浏览器中运行。控制台中没有错误或在任何地方显示。在过去的两天里，我一直在Stack Overflow 上尝试所有其他已回答的问题，包括缓存中断、添加标头选项等任何问题。在这里迷路了，任何指导将不胜感激，我会添加任何需要的额外信息。

HTML

<!DOCTYPE html>
 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>API CAll</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="app.js"></script>
<style>
* {
    box-sizing: border-box;
}

div p{
    width: 100px;
    border: 1px solid green;
    padding: 20px;
    margin: 20px;
}
.row {
    display: flex;
}

.column {
    flex: 50%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}
</style>
</head>

<body>

   <div id="content" class="row"></div>
 </body>
 </html>

 $( document ).ready(function() {

  var api_url2 = 'https://api.exchangeratesapi.io/latest?base=USD&symbols=TRY,BRL,MXN';

    $.ajax({
        type: 'GET',
        url: api_url2 ,
        dataType: 'json',
        success: function(result){

        const objVal = result.rates;             
        var keys = [], k, i, len;

        for (k in objVal) {
            if (objVal.hasOwnProperty(k)) {
                keys.push(k);
            }
        }

        keys.sort();

          len = keys.length;

          for (i = 0; i < len; i++) {
            k = keys[i];
            console.log(k + ':' + objVal[k]);
            let column = $("<div class='column'></div>");

                for (j = 0; j < 3; j++) {
                // TODO: Should you match .row here, or use a specific row?
                $(".row").append(column);
                // Use jQuery to create the P element instead of the DOM.
                let para = $('<p></p>');
                // Use the jQuery text() method to set the content.  (Prevents element
                // injection by server via innerHTML.)
                para.text(`${objVal[k].toFixed(3)} ${k} `);

                // Append this element only to the one div we created this iteration of the
                // outer loop.
                column.append(para);
                }
          }


        }
  })
 });

【问题讨论】：

“显示不正确”是什么意思？
当我刷新页面时没有显示任何内容。
IE11 不完全支持 const 和 let。如果你不编译你的源代码，也许可以避免这些。 caniuse.com/#search=const

标签： javascript jquery ajax internet-explorer-11

【解决方案1】：

IE11 不支持 ES6。这意味着，您需要替换：

具有旧 ES5 语法 'string' + 'string' 的模板文字
let/const 和var（正如@lostero 提到的，在IE11 中支持let/const，but not fully），所以最好避免使用它们。

或使用 ES6+ > ES5 转译器，如 Babel

无论如何，这是 IE 的代码：

$( document ).ready(function() {

  var api_url2 = 'https://api.exchangeratesapi.io/latest?base=USD&symbols=TRY,BRL,MXN';

    $.ajax({
        type: 'GET',
        url: api_url2 ,
        dataType: 'json',
        success: function(result){

        const objVal = result.rates;             
        var keys = [], k, i, len;

        for (k in objVal) {
            if (objVal.hasOwnProperty(k)) {
                keys.push(k);
            }
        }

        keys.sort();

          len = keys.length;

          for (i = 0; i < len; i++) {
            k = keys[i];
            console.log(k + ':' + objVal[k]);
            var column = $("<div class='column'></div>");

                for (j = 0; j < 3; j++) {
                // TODO: Should you match .row here, or use a specific row?
                $(".row").append(column);
                // Use jQuery to create the P element instead of the DOM.
                var para = $('<p></p>');
                // Use the jQuery text() method to set the content.  (Prevents element
                // injection by server via innerHTML.)
                para.text(objVal[k].toFixed(3) + k );

                // Append this element only to the one div we created this iteration of the
                // outer loop.
                column.append(para);
                }
          }


        }
  })
 });

* {
    box-sizing: border-box;
}

div p{
    width: 100px;
    border: 1px solid green;
    padding: 20px;
    margin: 20px;
}
.row {
    display: flex;
}

.column {
    flex: 50%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div id="content" class="row"></div>

Live code

【讨论】：

我看到你有version 3.3.1，而我正在使用version jquery-3.4.1，这会是这里的关键因素吗？
@whisk 不是，你可以使用最新版本。
我正在尝试您的更改，但仍然没有任何显示。 IE 中是否有某些设置可能导致此问题？
@whisk 很好，它对我有用，尝试在 IE11 中打开 this link。有效吗？