Bootstrap 4 IE 没有在 card-img-overlay 上使用 col-sm-12答案

【问题标题】：Bootstrap 4 IE not taking col-sm-12 on card-img-overlayBootstrap 4 IE 没有在 card-img-overlay 上使用 col-sm-12
【发布时间】：2019-06-09 23:25:39
【问题描述】：

我使用 bootstrap card-img-overlay 类创建了一个带有图像和文本覆盖的 cta。还添加了一个暗低不透明度的 div 以使文本更亮。除 IE 11 外，所有浏览器都运行良好。

第一季度： IE 中的列宽在哪里中断，我不认为它是我的 css 造成这部分。这是已知的 bootstrap 4 问题吗？

第二季度： 如何修复覆盖 div 以显示在图像顶部，如 chrome 和其他浏览器。是否有更好的方法同时适用于两者？

破坏 IE 图像

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

.dnow-regionsContent .overlay-div {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #000;
    opacity: 0.3;
}
.dnow-regionsContent img {
    max-height: 40rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>slick slider</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous">


   <link rel="stylesheet" href="css/style.css">
</head>

<body>
   <section class="dnow-regionsWrap">
      <div class="dnow-regionsContent">
         <div class="card bg-dark text-white">
            <img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt="">
            <div class="overlay-div"></div>
            <div class="card-img-overlay d-flex align-items-center container">
               <div class="row  mb-5">
                  <div class=" col-sm-12 text-content">
                     <h2 class="card-title ">
                        Canada
                     </h2>
                     <p class="">
                        Viewl all Location Viewl all Location
                     </p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>

   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"></script>

</body>

</html>

【问题讨论】：

请添加您的代码。
@DogukanCavus srry 提交太快了

标签： html twitter-bootstrap css bootstrap-4

【解决方案1】：

实际原因：

不是col-sm-12，而是card-img-overlay 上的d-flex，这会让你的设计在 IE 中看起来不合适。

为什么？

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

在您的情况下，我们有 d-flex 和 card-img-overlay，因此它的直接子项（即弹性项目）.row 不会有 100% 宽度。现在对于col-sm-12 列，100% 将是与其父级 (.row) 本身不够宽的完整水平空间。这才是真正的问题。

解决方案：

将100% 宽度赋予.row，您可以使用Bootstrap 4 的类w-100。
- 这可能是您的问题/查询的真正解决方案，但仍然需要做一些事情来获得您想要的外观，就像您在其他浏览器中所拥有的那样。
提供position: absolute 不能单独工作，智能浏览器会知道该做什么，但其他浏览器需要像top 和left 这样的偏移值。在您的情况下，值为0。
最终图像的实际尺寸与<img> 标记的width 和height 属性相同，在您的情况下，它将是width="1200" 和height="800"。

所以基本上引导程序与这个问题无关，它只是标记和 CSS 属性的流程。

旁注：

我希望以上步骤可以帮助您清除或理解问题。我建议始终为<img> 标签设置width 和height 属性，以便浏览器（旧版本）知道在页面上制作特定大小的块。

.dnow-regionsContent .overlay-div {
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #000;
    opacity: 0.3;
    /*Added*/
    top:0;
    left:0;
}
.dnow-regionsContent img {
    max-height: 40rem;
}

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>slick slider</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous">


   <link rel="stylesheet" href="css/style.css">
</head>

<body>
   <section class="dnow-regionsWrap">
      <div class="dnow-regionsContent">
         <div class="card bg-dark text-white">
            <img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" width="1200" height="800" alt="">
            <div class="overlay-div"></div>
            <div class="card-img-overlay d-flex align-items-center container">
               <div class="row mb-5 w-100">
                  <div class=" col-sm-12 text-content">
                     <h2 class="card-title ">
                        Canada
                     </h2>
                     <p class="">
                        Viewl all Location Viewl all Location
                     </p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>

   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"></script>

</body>

</html>

不是你，是IE。

希望对您有所帮助！

【讨论】：

行得通，对这两个问题都有很好的解释 - 谢谢
很高兴它对您有所帮助。

【解决方案2】：

我还没有测试 IE。

但我已经使用了您的示例并将其带到Bootstrap 4 的基层。

我已修改您的 css 和 html 以使用 :before 以您的黑色不透明样式覆盖图像。我将此应用于.card-img-overlay，任何子元素自然会出现在:before 伪样式之上。

HTML

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

SASS/CSS

.card-img-overlay {
  overflow: hidden;

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

}

在 IE 中试试这个小提琴...https://jsfiddle.net/joshmoto/xm4ude0L/

如果这仍然不能在 IE 中工作，那么你将不得不成为老派并找到解决方法。如果是我，我会输出一个浏览器 body 类，并为使用 css 的 IE 用户控制问题。你还没有提到你是如何生成你的 html 的，所以我不能就浏览器 body 类函数提出建议。

或者只是使用browser happy 来推广更好的网页浏览方式，以迫使访问用户提高他们的游戏水平并与时俱进:)

【讨论】：

【解决方案3】：

这里有很多不必要的东西。

这是一个在 IE 中工作的 sn-p。

由于某种原因，您的 img 链接在 IE 中不起作用，所以我将其替换为另一张图片。

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>slick slider</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous">


   <link rel="stylesheet" href="css/style.css">
</head>

<body>
   <section class="dnow-regionsWrap">
      <div class="dnow-regionsContent">    
         <div class="card bg-dark text-white">
          <img src="https://cdn2.outdoorphotographer.com/2018/04/DShow_Echoconfl-824x548.jpg" alt="">
            <div class="card-img-overlay align-items-center d-flex">
              <div class="card-body ">
                <h2 class="card-title">
                 Canada
                </h2>
                <p class="card-text">
                  Viewl all Location Viewl all Location
                </p>
              </div>
            </div>
         </div>
      </div>
   </section>
               
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"></script>

</body>

</html>

【讨论】：

【解决方案4】：

Bootstrap 4 使用列的 flex 属性。据我所知，此属性与 IE 不完全兼容。 IE也被微软停产了，我不担心提供支持。

【讨论】：

IE 仍然拥有大约 3% 的市场份额（根据 gs.statcounter.com/…），所以你还不能完全计算出来。在我看来，渐进式增强是要走的路。
我们还是要支持IE 11，ms还是会更新11