Html 引导4 IE不接受卡上的col-sm-12 img覆盖

我使用引导卡img overlay类创建了一个带有图像和文本覆盖的cta。还添加了一个暗低不透明度的div，以使文本更亮。除IE 11外，所有浏览器都能正常工作

问题1： IE中的列宽在哪里，我不认为这是我的css 造成这一部分。这是已知的引导4问题吗

问题2： 如何修复覆盖div以显示在图像顶部，如chrome和其他浏览器。有没有更好的方法对两者都有效

破坏了IE形象

Chome和其他运行良好的浏览器

.dnow RegionContent.overlay div{ 身高：100%； 宽度：100%； 位置：绝对位置； 背景色：000； 不透明度：0.3； } .dnow区域内容img{ 最大高度：40雷姆； } 光滑滑块 加拿大

查看所有位置查看所有位置

---

Bootstrap 4使用列的flex属性。据我所知，此属性与IE不完全兼容。此外，IE已被Microsoft停止使用，我不担心提供支持。

Bootstrap 4将flex属性用于该列。据我所知，该属性与IE不完全兼容。而且IE已被Microsoft终止，我不会担心提供支持。

我还没有测试IE的方法

但我已经用了你的例子，并把它带到了美国的基层

我已经修改了你的css和html来使用：before用你的黑色不透明样式覆盖图像。我将此应用于.card img覆盖，任何子元素都将自然出现在：before伪样式上方

HTML

试试这把小提琴吧

如果这在IE中仍然不起作用，那么你将不得不老调重弹，四处寻找工作。如果是我，我将输出一个浏览器主体类，并使用css为IE用户控制问题。您还没有提到如何生成html，因此我无法建议使用浏览器主体类函数

---

或者只是用来推广更好的网络浏览方式，迫使来访的用户升级游戏，跟上时代：

我还没有测试IE的方法

但我已经用了你的例子，并把它带到了美国的基层

我已经修改了你的css和html来使用：before用你的黑色不透明样式覆盖图像。我将此应用于.card img覆盖，任何子元素都将自然出现在：before伪样式上方

HTML

试试这把小提琴吧

如果这在IE中仍然不起作用，那么你将不得不老调重弹，四处寻找工作。如果是我，我将输出一个浏览器主体类，并使用css为IE用户控制问题。您还没有提到如何生成html，因此我无法建议使用浏览器主体类函数

或者只是用它来推广更好的网络浏览方式，迫使来访的用户升级游戏，跟上时代：

实际原因：

它不是col-sm-12，而是d-flex卡上img覆盖，这使得您的设计在IE中看起来不合适

为什么?

当display:flex应用于一个元素时，直接子元素（即flex项）需要指定一些宽度，否则它们不会像我们所要求的那样展开或占用足够的空间，除非内容不够

在您的情况下，我们有d-flex沿卡img覆盖，因此直接子项，即it.row的flex项，不会具有100%宽度。现在对于col-sm-12列，100%将是其父行的完整水平空间，该行本身不够宽。这才是真正的问题

解决方案：

为.row指定100%的宽度，您可以使用引导程序4 w-100的类。 这可能是您的问题/查询的真正解决方案，但要获得您想要的外观，还需要做一些事情，就像在其他浏览器中一样。 给出位置：绝对不能单独工作，智能浏览器知道该做什么，但其他浏览器需要像top和left这样的偏移值。在您的情况下，值为0。 最后用图像的实际尺寸来属性宽度和高度 加拿大

查看所有位置查看所有位置

实际原因是:

它不是col-sm-12，而是d-flex卡上img覆盖，这使得您的设计在IE中看起来不合适

为什么?

当display:flex应用于元素时，直接子元素即 flex项目需要指定一些宽度，否则它们不会像我们要求的那样扩展或占用足够的空间，除非内容不够

在您的情况下，我们有d-flex沿卡img覆盖，因此直接子项，即it.row的flex项，不会具有100%宽度。现在对于col-sm-12列，100%将是其父行的完整水平空间，该行本身不够宽。这才是真正的问题

解决方案：

为.row指定100%的宽度，您可以使用引导程序4 w-100的类。 这可能是您的问题/查询的真正解决方案，但要获得您想要的外观，还需要做一些事情，就像在其他浏览器中一样。 给出位置：绝对不能单独工作，智能浏览器知道该做什么，但其他浏览器需要像top和left这样的偏移值。在您的情况下，值为0。 最后用图像的实际尺寸来属性宽度和高度 加拿大

查看所有位置查看所有位置

---

这里有很多不必要的事情

下面是一个在IE中工作的代码片段

无论出于什么原因，你的img链接在IE中不起作用，所以我用另一张图片替换了它

光滑滑块 加拿大

查看所有位置查看所有位置

---

这里有很多不必要的事情

下面是一个在IE中工作的代码片段

无论出于什么原因，你的img链接在IE中不起作用，所以我用另一张图片替换了它

光滑滑块 加拿大

查看所有位置查看所有位置

---

请添加您的代码。@DogukanCavus srry提交得太快了请添加您的代码。@DogukanCavus srry提交得太快了。根据，DogukanCavus srry仍有约3%的市场份额，因此您还不能完全计算出来。在我看来，渐进式的升级是一条路。我们仍然需要支持IE11，微软仍然更新了11IE的版本。根据，IE3%的市场份额仍然存在，所以你还不能完全计算出来。在我看来，渐进式增强是一条路要走。我们仍然需要支持IE 11，ms仍然为11提供了有效的更新，对这两个问题都有很好的解释-感谢它帮助了你。这很有效，对这两个问题都有很好的解释-感谢它帮助了你。

<div class="card bg-dark text-white">
  <img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" class="card-img" alt="...">
  <div class="card-img-overlay">
    <div class="container h-100">
      <div class="row h-100">
        <div class="col align-self-center">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text">Last updated 3 mins ago</p>
        </div>
      </div>  
    </div>  
  </div>
</div>

.card-img-overlay {
  overflow: hidden;

  &:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: #000;
    opacity: 0.3;
  }

}