IE11

でパディングによって脇強制フレックスボックスの中心の子一元<div>内<a>タグを配置し、それは完全に私は以下のスニペットでマークアップとCSS使用していた親を埋める持つために：IE11

.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>

をデモンストレーションの目的 <div>秒間

は、固定されたサイズを有するが、最終的に、彼らは、したがって、それらは、Alことを確実にするために<a>タグにパディングを大量に与え、異なるビューポートサイズでわずかにサイズを変更してもよいですウェイは中央に留まる間に<div>全体をカバーします。色は、効果をより見やすくするためにのみ含まれています。

筆記時にChromeまたはFirefox（バージョン58.0.3029.110 [64ビット]およびバージョン53.0 [64ビット]）で表示された場合、<a>タグは中央に配置され、余分な埋め込みは親によって隠されます<div>（赤色の色は見えず、青色のみが見えるはずです）。しかし、IE11では、<a>のタグがパディングによって右にプッシュオフされていますが、これはChromeとFirefoxで見られる動作とは一致しません。また、.containerクラスにflex-direction: columnを追加する<a>タグがflex-directionに接続されている問題を示唆する右の代わりにダウンををプッシュさせます。

IEがChromeとFirefoxと同じように動作するようにする回避策はありますか？

出典

2017-06-12 Outrigger

取得するには、あなただけのflex-grow:1を追加する必要があり、それを中心にFlexの使用です内容：

.container { 
 
    align-items: center; 
 
    background: lightcoral; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    flex-direction: column; /* add this so your grow will make it grow to 100% height */ 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
.contained { 
 
    background: lightblue; 
 
    flex-grow: 1;   /* add this for 100% height */ 
 
    align-self: stretch; /* add this for 100% width */ 
 
    
 
    display:flex;   /* the following is for centring your anchor content */ 
 
    justify-content: center; 
 
    align-items: center; 
 
}

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

出典

2017-06-12 10:43:41 Pete

私はそれが

あなたが同じを取得するためにflexを使用することができますし、それがうまく働いているし、あなたの親background: lightcoral;は今隠しているIEで確認することができますpaddingの抱擁値を追加する必要があなたを助けるんだろうと思います。

ここで私はIEのスクリーンショットを添付して、うまくいきます。

使用flex親を埋めるためにアンカーためには、それ

.container { 
 
    align-items: center; 
 
    background: lightcoral; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    height: 100px; 
 
    justify-content: center; 
 
    align-items: center; 
 
    overflow: hidden; 
 
    width: 100px; 
 
} 
 

 
.contained { 
 
    background: lightblue; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 100%; 
 
    height: 100%; 
 
    align-self: center; 
 
}

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

出典

2017-06-12 10:28:28 LKG

答えて

関連する問題