Um zentral ein <a> Tag innerhalb einer <div> zu positionieren und haben es die Eltern füllen vollständig ich das Markup und CSS im Snippet bin mit unter:Centered Kind Flexbox beiseite durch Klotzen in IE11 gezwungen
.container {
align-items: center;
background: lightcoral;
border: 1px solid black;
display: flex;
height: 100px;
justify-content: center;
overflow: hidden;
width: 100px;
}
.contained {
background: lightblue;
padding: 100px;
}<body>
<div class="container">
<a class="contained" href="#">1</a>
</div>
<div class="container">
<a class="contained" href="#">2</a>
</div>
<div class="container">
<a class="contained" href="#">3</a>
</div>
</body>Für die Zwecke der Demonstration der <div> s Größen festgelegt haben, aber letztlich können sie Größe leicht in unterschiedlichen Darstellungsgrößen ändern, damit die <a> Tags große Mengen an Polsterung geben, um sicherzustellen, dass sie al Weisen decken die gesamte <div> während zentral bleiben. Die Farben sind ebenfalls nur enthalten, um den Effekt besser sehen zu können.
Wenn in Chrom oder Firefox betrachtet (Version 58.0.3029.110 [64-bit] und Version 53.0 [64-bit] jeweils zum Zeitpunkt des Schreibens) die <a> Tags zentral, mit der überschüssigen Polsterung von der Mutter versteckte angeordnet sind, <div> (Sie sollten keine rote Farbe sehen können, nur blau). In IE11 werden die Tags <a> jedoch durch ihre Auffüllung nach rechts verschoben, was nicht dem Verhalten in Chrome und Firefox entspricht. Darüber hinaus bewirkt flex-direction: column zum .container Klasse Hinzufügen der <a> Tag unten statt rechts, die das Problem schlägt geschoben werden soll, an flex-direction gebunden.
Gibt es eine Problemumgehung für den IE, damit er sich genauso verhält wie Chrome und Firefox?
