Question

为了将<a>标记集中放置在<div>内并让它完全填充父级，我在下面的代码段中使用了标记和CSS：

.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相同？

Answer 1

我认为它会对你有所帮助

无需添加padding的拥抱值，您可以使用flex来获取相同的内容，并且您可以在IE中检查它是否正常工作并且您的父{隐身}隐藏了background: lightcoral;现在

这里我附上了IE截图，它工作正常。

使用flex获取

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

为了让锚点填充父级，你只需要添加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>

在IE11中，flexbox的中心子项被填充

2 个答案: