Internet Explorer中的Bootstrap卡图像失真

Question

我在我的布局中使用了bootstrap v4卡,不幸的是,这些图像在Internet Explorer 11中失真.似乎IE完全忽略height: auto了img-fluid类所给出的属性.是否有必要对卡片图像应用自定义高度？但是,这些卡在Chrome和Firefox中完美呈现.有趣的是,如果我将引擎更改为IE 10(在F12控制台中),问题就消失了.

由于img-fluid没有用卡片包裹的类的图像是按照原始比例显示的,我认为问题对应于卡片布局.

   <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/1.jpg" alt="Step 1" width="600" height="400" />
            <div class="card-block">
              <h3 class="card-title">Step 1</h3>
              <p class="card-text">Text 1</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/2.jpg" alt="Step 2" width="600" height="400" />
            <div class="card-block">
              <h3 class="card-title">Step 2</h3>
              <p class="card-text">Text 2</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/3.jpg" alt="Step 3" width="600" height="400" />
            <div class="card-block">
              <h3 class="card-title">Step 3</h3>
              <p class="card-text">Text 3</p>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

我有同样的问题,但是当我将卡片的内容包装在<a>标签中以使其可点击并且它自行修复时,但是IE11中卡的高度是错误的,我通过添加height: 100%到<a>标签来修复:

<div class="col-md-4">
    <div class="card h-100">
        <a href="/document" style="height:100%;">
            <img class="card-img-top img-fluid" src="foo.jpg">
            <div class="card-block">
                <h4>doc number 4</h4>
                <p class="card-text">yada yada</p>
            </div>
        </a>
    </div>
</div>

如果您不希望您的卡可以点击,您可以替换<a>a <div>(我还没有测试过).

Answer 2

Bootstrap 4仍处于Alpha状态，因此您应该期待各种问题。

IE 11中的图像高度问题已得到确认，您可以在此处进行跟踪：

https://github.com/twbs/bootstrap/issues/21885