0
votes

CSS non appliqué lorsque Display Flex est utilisé dans Microsoft Edge

J'essaie d'appliquer une bordure avant et après le texte. Il fonctionne sur tous les navigateurs à l'exception de Microsoft Edge et d'Internet Explorer. J'utilise display: flex et veuillez consulter mon code pour plus de détails

J'ai essayé de définir max-width à 100% et d'ajouter box-sizing: border-box mais ne semble pas fonctionner

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>

J'ai besoin que la bordure apparaisse également dans IE 11

css flexbox microsoft-edge internet-explorer-11

3 commentaires

Ça ne casse que parfois

display block ou inline-block sur le :: before :: after pourrait aider.

J'ai essayé mais ça casse quand je le recharge deux ou trois fois

3 Réponses :

0
votes

Inspiré d'une vidéo de Rachel Andrew:

Grille pour atteindre cet objectif.

html:

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

css:

<h1>OR</h1>

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

Vous pouvez utiliser flex avec une grille enveloppée dans @supports https://developer.mozilla.org/en-US/docs/Web/CSS/@supports .

mise en page html utilisant css en 2019 https://www.youtube.com/watch?v=5XsZnCwbgwA

p >

0 commentaires

0
votes

Inspiré par la réponse de @Carol McKay. Le code peut bien fonctionner dans Edge mais pas dans IE. Je l'ai donc modifié et le code ci-dessous peut bien fonctionner dans Edge et IE11:

<h1>OR</h1>

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

0 commentaires

0
votes

Pour IE11, vous devez réinitialiser display sur le pseudo élément et réinitialiser également flex-grow .

Votre code devient:

<text>OR</text>

Démo ci-dessous pour exécuter avec 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;
}

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>

est que le fantôme errant se promène depuis IE5 ??

0 commentaires