通過填充在IE11

被迫擱置爲了實現Flexbox爲中心的孩子到<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>■找固定的尺寸，但最終它們可以以不同的視口的大小略有變化的大小，因而令<a>標籤大量填充的示範的目的，以確保它們人方式覆蓋整個<div>，同時保持中心。顏色也僅包含在內，以便更容易看到效果。

在Chrome或Firefox（分別爲版本58.0.3029.110 [64位]和版本53.0 [64位]）中查看時，<a>標籤居中放置，多餘的填充由父項隱藏<div>（你應該看不到紅色，只有藍色）。但是，在IE11中，<a>標記被填充到右側，與Chrome和Firefox中的行爲不匹配。此外，添加flex-direction: column到.container類導致<a>標籤被推下而不是權，這表明該問題被綁定到flex-direction。

IE瀏覽器是否有一種解決方法，使它的行爲方式與Chrome和Firefox相同？

來源

2017-06-12 Outrigger

爲了錨填補了父母，你只需要添加flex-grow:1，使用柔性居中它的內容：

.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

我認爲這將有助於你

無需添加的padding擁抱值可以使用flex獲得相同的，您就可以在IE它的正常工作和您的父母background: lightcoral;現在是隱藏。

在這裏我附上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

通過填充在IE11

回答

相關問題