在 Microsoft Edge 中使用 display flex 时未应用 CSS答案

【问题标题】：CSS not applied when display flex is used in microsoft edge在 Microsoft Edge 中使用 display flex 时未应用 CSS
【发布时间】：2019-11-04 20:22:59
【问题描述】：

我正在尝试在文本之前和之后应用边框。它适用于除 Microsoft Edge 和 Internet Explorer 之外的所有浏览器。我正在使用 display: flex，详情请参考我的代码

我尝试将 max-width 设置为 100% 并添加 box-sizing:border-box 但似乎不起作用

const text = styled(div)`
    display: flex;
    align-items: center;
    color: gray;
    margin-bottom: 24px;
    ::before, ::after {
        content: '';
        width: 100%;
        border-top: 1px solid gray;
      }
    ::before {
        margin-right: 8px;
      }
    ::after {
        margin-left:8px;
  }
`;
<text>OR</text>

我还需要在 IE 11 中显示边框

【问题讨论】：

它只是偶尔中断
在 ::before ::after 上显示块或内联块可能会有所帮助。
我试过了，但是当我重新加载两次或三次时它仍然会中断

标签： css flexbox internet-explorer-11 microsoft-edge

【解决方案1】：

灵感来自 Rachel Andrew 的视频：

网格来实现这个目标。

html:

<h1>OR</h1>

css:

h1 
{
   /* grid layout css */
   display: grid;
   align-items: center;
   gap: 8px;

   /* other css */
   color: gray;
   margin-bottom: 24px;
}

::before, ::after 
{
    content: '';
    border-top: 1px solid gray;
}

https://caniuse.com/#search=grid

您可能希望将 flex 与包含在 @supports https://developer.mozilla.org/en-US/docs/Web/CSS/@supports 中的网格一起使用。

2019年使用css的html布局https://www.youtube.com/watch?v=5XsZnCwbgwA

【讨论】：

【解决方案2】：

受@Carol McKay 的回答启发。该代码可以在 Edge 中运行良好，但在 IE 中无法运行。所以我修改了它，下面的代码可以在 Edge 和 IE11 中运行良好：

h1 {
     /* grid layout css */
     display: grid;
     align-items: center;
     grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
     grid-gap: 8px;
     /* other css */
     color: gray;
     margin-bottom: 24px;
    }

h1::before, h1::after {
     content: "";
     display: block;
     border-top: 1px solid gray;
    }

&lt;h1&gt;OR&lt;/h1&gt;

【讨论】：

【解决方案3】：

对于 IE11 ，您需要在伪元素上重置 display 并同时重置 flex-grow。

你的代码变成：

const text = styled(div)`
    display: flex;
    align-items: center;
    color: gray;
    margin-bottom: 24px;
    ::before, ::after {
        content: '';
        display:block;
        flex-grow:1;
        border-top: 1px solid gray;
      }
    ::before {
        margin-right: 8px;
      }
    ::after {
        margin-left:8px;
  }
`;
<text>OR</text>

下面的演示使用 IE 运行。

text {
  display: flex;
  align-items: center;
  color: gray;
  margin-bottom: 24px;
  width:100%;
}

 text::before,
 text::after {
  content: '';
  display:block;
  flex-grow:1 ;
  border-top: 1px solid gray;
}

 text::before {
  margin-right: 8px;
}

 text::after {
  margin-left: 8px;
}

&lt;text&gt;OR&lt;/text&gt;

那是IE5以后到处乱跑的haslayout鬼吗？？

【讨论】：