Dans Chrome, j'observe un débordement de texte au lieu d'être enveloppé dans des cellules de tableau lorsque j'utilise :: before sur le contenu de la cellule. Il semble que :: avant soit le déclencheur, tout se déroulera comme prévu sans lui. Je ne vois pas cela dans Firefox ou IE / Edge.
Voici un exemple très simplifié. Dans le système dans lequel je travaille, je ne peux pas changer le HTML, seulement le CSS.
Utilisation de display: inline-block sur le label code > corrige le wrapping, mais cela fait que la boîte verte n'apparaît plus en ligne (la ligne enveloppée s'alignera à droite de la boîte verte plutôt qu'à gauche). J'essaie de trouver un moyen de rendre Chrome simplement enveloppé comme le font les autres navigateurs.
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td><label>text A</label></td>
<td><label>text B</label></td>
<td><label>text C</label></td>
</tr>
</table>
</body>
</html>
table {
font-size: 40px;
width: 350px;
border: 1px solid blue;
}
td {
border: 1px solid red;
}
label {
padding-left: 1em;
position: relative;
}
label::before {
border: 1px solid green;
content: "";
height: 1em;
width: 1em;
top: 0;
left: 0;
display: block;
position: absolute;
}
4 Réponses :
Vient d'ajout d'affichage: table
EDITED: libellé modifié: avant et affichage ajouté: inline-block
merci Temani Afif pour votre contribution.
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td><label>text A</label></td>
<td><label>text B</label></td>
<td><label>text C</label></td>
</tr>
</table>
</body>
</html>
table {
font-size: 40px;
width: 350px;
border: 1px solid blue;
}
td {
border: 1px solid red;
}
label {
position: relative;
display:table;
}
label::before {
border: 1px solid green;
content: "";
height: 1em;
width: 1em;
display: inline-block;
}
Cela n'a pas la même apparence que dans FFox.Il y a un rembourrage supplémentaire sur la gauche après la pause.
J'ai modifié la réponse, veuillez la vérifier maintenant
pas besoin de position: relative puisque haut et gauche sont 0 (ils peuvent également être supprimés)
vous pouvez également vous débarrasser du mot de passe
Pourquoi le display: table sur le label ? Cela semble compliquer les choses.
Sûr. Merci encore
@AndyHoffman display: table fonctionne comme width: fit-content, mais est plus générique
Ok, j'ai mélangé les navigateurs. Maintenant, je suis sûr que j'étais dans Chrome, même version que la vôtre:
label::after {
content: "";
display: block;
height: 1em;
position: absolute;
z-index: -1;
border: 1px solid green;
width: 1em;
top: 0;
left: 0;
}
changé :: avant pour un :: après btw
J'ai vu, mais il est peut-être trop tard. Je n'ai pas voté contre vous, d'ailleurs.
La réponse la plus simple consiste principalement à supprimer le code, ce qui est ma réponse préférée.
libellé de base : avant pour qu'il ait un positionnement par défaut (statique). Comme il n'est plus positionné de manière absolue, nous pouvons également supprimer les règles de positionnement. : before inline-block pour qu'il réponde à l'alignement vertical et que le texte de étiquette soit correctement aligné. li>
<table>
<tr>
<td><label>text A</label></td>
<td><label>text B</label></td>
<td><label>text C</label></td>
</tr>
</table>
table {
font-size: 40px;
width: 350px;
border: 1px solid blue;
}
td {
border: 1px solid red;
}
label:before {
content: '';
border: 1px solid green;
height: 1em;
width: 1em;
display: inline-block;
vertical-align: top;
}
Perte de poids CSS
Avant: 22 lignes
Après: 16 lignes
C'était un bogue dans Chrome et ils l'ont corrigé. La solution consiste à utiliser la dernière version de Chrome.
Plus d'informations sur: https://bugs.chromium.org / p / chromium / issues / detail? id = 925493 .
pourquoi rendre la position du pseudo élément: absolue? un simple bloc en ligne fera l'affaire
Quant à savoir pourquoi il est positionné de manière absolue, il ne s'agit que d'un exemple simplifié avec le minimum pour déclencher le problème. J'ai besoin du positionnement absolu pour pouvoir placer la boîte verte (qui est vraiment quelque chose de plus complexe) à un endroit précis.
Il y a un rapport de bogue ici: bugs.chromium.org/p/chromium / issues / detail? id = 925493