Question

我目前正在尝试解决display: flex和Internet Explorer 11的问题。我有一个固定宽度的表，里面有一个带display: flex的div。这会导致表在IE11中被拉伸。我尝试使用flex-wrap属性，它根本不会改变IE中的行为，但也会改变chrome中的布局。我将代码分解为下面的代码段，当您在IE11和Chrome（或基本上任何其他浏览器）中打开它时，会显示问题。有没有人知道如何在IE11中实现Chrome的正确行为？

（初始片段）

＆＃13;

table {
    width: 200px; 
    border: 1px solid #000;
}

.flex {
   display:flex;
}

.icon:before {
   content: "✆";
}

＆＃13;

<table>
   <tr>
      <td>
         <div class="flex">
            <span class="icon"></span>
            <span class="content">Lorem Ipsum dolor sit amet Lorem Ipsum dolor and so on ...</span>
         </div>
      </td>
   </tr>
</table>

＆＃13;

编辑1： 在尝试Paulie_D和LGSon的答案后，会导致表格预先定义列宽度，等待实际内容宽度的instaed，这会导致一些文本溢出。我更新了下面的Snippets以显示这一点。能够用LGSons的答案重现它，目前正在深入研究Paulie_D的答案。

＆＃13;

table {
    width:200px; 
    border: 1px solid #000;
    table-layout: fixed;
}

.flex {
   display:flex;
}

.icon:before {
   content: "✆";
}

＆＃13;

<table>
   <tr>
      <td>
         <div class="flex">
            <span class="icon"></span>
            <span class="content">Lorem Ipsum dolor sit amet Lorem Ipsum dolor and so on ...</span>
         </div>
      </td>
      <td>
            <span class="content">LongWordWithoutWhitespace</span>
      </td>
   </tr>
</table>

＆＃13;

编辑2： 我能够重现Paulie_D解决方案的问题，请查看下面的代码：

＆＃13;

table {
    width: 90%; 
    border: 1px solid #000;
    table-layout: fixed;
}

.flex {
   display:flex;
}

.icon:before {
   content: "✆";
}

.content {
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0; 
}

＆＃13;

<table>
   <tr>
      <td>
         <div class="flex">
            <span class="icon"></span>
            <span class="content">Lorem Ipsum dolor sit amet Lorem Ipsum</span>
         </div>
      </td>
      <td>
         <div class="flex">
            <span>Content here</span>
         </div>
      </td>
            <td>
         <div class="flex">
            <span>and_some_long_content_here</span>
         </div>
      </td>
   </tr>
</table>

＆＃13;

Answer 1

这是因为IE不接受k作为默认值b - 1的值。

如果将其更改为with open('safein.txt') as in_file: a, b = (int(x) for x in in_file.readline().split()) code = [int(in_file.readline()) for _ in range(a)] plain = [int(in_file.readline()) for _ in range(b)] for i in range(a): k = code[i] - plain[0] if k < 0: continue for j in range(1, b): if code[i] - code[i + j] != plain[0] - plain[j]: break else: break # found match, break outer loop with open('safeout.txt', 'w') as out_file: out_file.write('\n'.join(str(x - k) for x in code))，则按预期工作。

＆＃13;

auto

＆＃13;

flex-basis

＆＃13;

Answer 2

IE需要constructor(props) { super(props); this.state = { videoSrc: "static/dt1.mp4", } this.testClick = this.testClick.bind(this); } testClick(evt) { console.log("hello"); } render() { return ( <div onClick={this.testClick}> <video ref={(video1) => { this.video1 = video1; }} width="100%" height="350"controls> <source src={this.state.videoUrl} type="video/mp4" /> </video> </div> ); }才能玩。

table-layout: fixed

table {
  width: 100px;
  border: 1px solid #000;
  table-layout: fixed
}

.flex {
  display: flex;
}

.icon:before {
  content: "✆";
}

问题编辑后更新

由于弹性项<table> <tr> <td> <div class="flex"> <span class="icon"></span> <span class="content">Lorem Ipsum dolor sit amet Lorem Ipsum dolor and so on ...</span> </div> </td> </tr> </table>默认为min-width，因此不会超出其内容。通过使用auto，或如下面的示例min-width: 0（也会剪切overflow: hidden没有的文字），它将能够超出其内容。

min-width会使word-wrap: break-word的内容换长字。

td

table {
  width: 100px;
  border: 1px solid #000;
  table-layout: fixed;
}
td {
  border: 1px solid #000;
}

.flex {
  display: flex;
}

.icon:before {
  content: "✆";
}

td {
  word-wrap: break-word;
}
.content {
  overflow: hidden;
}

IE 11使用display忽略宽度：flex child

2 个答案: