3

我正在写一个聊天。当我在一个 HTML 中编写所有 DOM 模块时，它在 Chrome 中可以正常工作，但 DOM 模块在 Edge 中无法正常工作。但后来我将所有 DOM 模块移到另一个 HTML 文件中。现在它可以在 Edge 中使用。但是现在 Flexbox 并不适用于所有浏览器。

我写了一些示例：

一个 HTML 中的所有 DOM 模块： http ://plnkr.co/edit/m9oKpnV2CWJvVu9Ry3PQ?p=preview

另一个 HTML 中的 DOM 模块： http ://plnkr.co/edit/n2rV8kDravia4CTNOSL5?p=preview

我不知道为什么，但在 Chrome 中，第二个示例可以正常工作，尽管在整个项目中它与 Flexbox 有问题。但是第二个示例在 Edge 中存在相同的问题。见第二张图。

Edge 中的第一个示例（未加载 DOM 模块）：

一切都在一个地方

Edge 中的第二个示例（“flex-basis：0”和“flex-grow：1”不起作用）：

DOM 模块在它自己的 HTML 文件中

Chrome中的正确结果：

正确的结果

索引.html：

<!DOCTYPE html>
<html>

  <head>
    <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link href="http://polygit.org/components/polymer/polymer.html" rel="import">

    <link rel="stylesheet" href="style.css">
  </head>

  <body>

    <div class='main-block'>
      <div class='title'>
        <span>Title</span>
      </div>

      <my-module></my-module>

    </div>

  </body>

</html>

<dom-module id="my-module">
  <template>
      <div class='messages'>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
      </div>
      <div class='title'>
        <span>Bottom</span>
      </div>
  </template>

  <script>
    Polymer({
            is: "my-module" 
    });
  </script>
</dom-module>

样式.css：

.main-block
{
  display: flex;
  flex-direction: column;

  border: solid 1px red;
  width: 300px;
  height: 400px;
  margin: 0 auto;
}

.title
{
  background-color: red;
  min-height: 50px;
  height: 50px;
  margin: 10px;
  text-align: center;
}

my-module
{
  display: flex;
  flex-direction: column;
  flex-basis: 0;
  flex-grow: 1;

  border: solid 1px green;
  margin: 10px;
}

.messages 
{
  flex-grow: 1;

  border: solid 1px blue;
  margin: 10px;

  overflow-x: hidden;
  overflow-y: auto;
}

.message
{
  background-color: pink;
  min-height: 50px;
  height: 50px;
  margin: 10px;
}
4

2 回答 2

2

该文件polymer.html由 异步加载<link rel="import">。

Polymer(...)这就是为什么在 Edge中函数调用会失败的原因。该函数尚未定义，因为脚本未加载。

在 Chrome 中它会起作用，因为自定义元素是由浏览器本地（并且以不同方式）处理的。

在依赖其内容之前，您应该等待事件HTMLImportsLoaded或确保已加载导入的 HTML 文件。WebComponentsReady

<script>
    window.addEventListener( "WebComponentsReady", function()
    {
        Polymer( {
            is: "my-module"
        } )
    } )
</script>

附录

对于 le flexbox部分，我没有 Edge，所以我无法测试，但我在 Firefox 上遇到了同样的问题，解决方案是overflow: hidden在 CCS 规则中添加my-module.

也许这适用于 Microsoft Edge：

my-module > div:first-child {
    overflow: auto ;
    flex-basis:0 ;
}

诀窍是识别需要overflow指令的元素。

于 2015-10-05T07:42:18.290 回答
1

要让它工作，应该添加行“flex-basis：0;” 进入 .messages 类。

与 Polymer.js 无关。这是因为不同浏览器中的 Flexbox 行为不同。

于 2015-11-03T17:20:26.150 回答