CSS 在 Microsoft Edge 中使用 display flex 时不适用

Question

我正在尝试在文本前后应用边框。它适用于除 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 中显示边框

Answer 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。

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

Answer 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;
    }

<h1>OR</h1>

Answer 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;
}

<text>OR</text>

是IE5以来的流浪haslayout幽灵吗？？

CSS 在 Microsoft Edge 中使用 display flex 时不适用

CSS not applied when display flex is used in microsoft edge

css

flexbox

internet-explorer-11

microsoft-edge