Question

我使用bootstrap card-img-overlay类创建了一个带有图像和文本覆盖的cta。还添加了具有低黑暗不透明度的div，以使文本更明亮。在IE 11以外的所有浏览器上，一切正常。

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

第二季度： 如何修复叠加层div，使其在chrome和其他浏览器（如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>

Answer 1

实际原因：

不是 col-sm-12 ，而是d-flex上的 card-img-overlay ，这使您的设计在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。
最后一个图像，其实际尺寸为width标签的属性height和<img>，在您的情况下为width="1200"和height="800"。

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

旁注：

我希望以上步骤可以帮助您解决问题或了解问题。我建议始终为width标签使用height和<img>属性，以便浏览器（旧的）知道在页面上使用该特定大小的块。

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

希望这对您有帮助！

Answer 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中仍然不起作用，那么您将不得不上旧学校并找到解决方法。如果是我，我将输出浏览器主体类，并使用css为IE用户控制问题。您没有提到如何生成html，因此我无法建议浏览器主体类函数。

或者只是使用browser happy来推广更好的网络浏览方式，以迫使访问者提高游戏水平并与时俱进：）

Answer 3

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

这里是可在IE中使用的代码段。

无论出于何种原因，您的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>

Answer 4

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

Bootstrap 4 IE不会在card-img-overlay上使用col-sm-12

4 个答案: