如何使 azure chat bot v4 在 Internet Explorer 中工作？答案

【问题标题】：How make azure chat bot v4 works in Internet Explorer?如何使 azure chat bot v4 在 Internet Explorer 中工作？
【发布时间】：2019-07-12 15:09:04
【问题描述】：

我开发了一个 Azure 聊天机器人 v4，在 Chrome 和其他浏览器上它可以工作，但不能在 Internet Explorer 中（我使用的是 IE11），显示组件但不显示聊天文本。

我已经添加了库https://cdn.botframework.com/botframework-webchat/master/webchat-es5.js，它似乎可以工作，但如果我写了一些东西，文本不会显示（但它调用https://directline.botframework.com/v3/directline/conversations/...每次我写东西并且调用返回200，所以它似乎工作但没有......）

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...
    <script src="https://cdn.botframework.com/botframework-webchat/master/webchat-es5.js"></script>
    </head>

    <body>
        <div class="wrapper">
            <header class="header">
                ...
            </header>
            <div id="webchat" class="botChat" role="main"></div>
        </div>
        <script  type="text/javascript" language="JavaScript">
            var styleOptions = {
                bubbleBackground: 'rgba(217, 229, 244, 1)',
                bubbleFromUserBackground: 'rgba(250, 230, 238, 1)',
                rootWidth: '100%',
                innerWidth: '80%',
            };

            var botConnection = new window.WebChat.createDirectLine({
                token: "mytoken"
            });

            window.WebChat.renderWebChat({
                directLine: botConnection,
                styleOptions: styleOptions
            }, document.getElementById('webchat'));
        </script>
    </body>

为什么我看不到文字？（仅在 IE 上）

【问题讨论】：

检查开发者工具 (F12) 中的 JavaScript 控制台，有什么提示吗？
控制台没有错误

标签： javascript html azure internet-explorer chatbot

【解决方案1】：

我们测试了这个问题，发现我们可以使用 Web Chat V4 在 IE 11 中重现问题。

要修复它，您可以尝试为 div 容器显式指定 height 和 width 属性，如下所示。

<div id="webchat">

<style>
    html, body {
        height: 100%
    }

    body {
        margin: 0
    }

    #webchat {
        height: 500px;
        width: 380px;
    }
</style>

测试结果：

【讨论】：

谢谢！这是一个奇怪的行为，我有 min-height: 500px;最大高度：100%；但它需要一个高度属性...