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在2019 https://www.youtube.com/watch?v=5XsZnCwbgwA中使用CSS进行布局

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幽灵吗？

在Microsoft Edge中使用Display Flex时未应用CSS

3 个答案: