Question

我在响应式网格中显示A4，A5，Quarto等尺寸产品的图像，并使用最大宽度：70％; （和其他百分比值）能够拍摄任意大小的图像并以正确的比例显示它们。这在大约10个浏览器/操作系统组合中运行良好 - 除了Win 10 / IE11

良好的展示：

此处网格中的每个单元格（<div class="product">）都有一个黑色轮廓，并包含一个红色的图像包装（<div class='productimage'>）加上其他包装文本和价格的div。使用jquery solution here我使所有网格单元都具有相同的高度。

在IE11中，图像似乎拒绝缩放，并且想要渲染完整尺寸而不是容器宽度的百分比：

从包含图片的display: table-cell;类中删除.productimage会在IE11上显示：

因此尺寸现在再次正确，但图像位于div的顶部。我尝试this以及基于position: relative / position: absolute的类似解决方案，但无法使其工作，因为，我认为，我的div没有固定的高度，和/或高度设置通过jquery。

Codepen

http://codepen.io/anon/pen/ENNvbZ

function equalize() {
  var $maxImgHeight = 0;
  var $maxTxtHeight = 0;

  $('.productrow .productimage').each(function(i) {
    if ($(this).height() > $maxImgHeight) {
      $maxImgHeight = $(this).height();
    }
  });

  $(".productrow .productimage").height($maxImgHeight);

  $('.productrow .producttitle').each(function(i) {
    if ($(this).height() > $maxTxtHeight) {
      $maxTxtHeight = $(this).height();
    }
  });

  $(".productrow .producttitle").height($maxTxtHeight);


  displayWindowSize();
}

function equalizeOnResize() {
  $(".productrow .productimage").height('auto');
  $(".productrow .producttitle").height('auto');
  equalize();
}

window.onresize = equalizeOnResize;
window.onload = equalize;

* {
  margin: 0;
  padding: 0;
  -webkit-padding-start: 0;
}
body {
  color: #444444;
  font-size: 16px;
  font-family: Arial;
  margin: 0px;
}
.centered_content {
  max-width: 1100px;
  margin: auto;
}
/* 
      scale images to relative paper sizes
    */

.a4_diary_image {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.quarto_diary_image {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.a5_diary_image {
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}
.a6_diary_image {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.pocket_diary_image {
  max-width: 40%;
  margin-left: auto;
  margin-right: auto;
}
/* 
      responsive grid for product categories - show 1,2,3 or 4 products 
      per row depending on screen size. first .product is mobile - rest 
      need to have a clear inserted into start of each new row so boxes line up evenly
    */

.product {
  background-color: white;
  padding: 10px 20px;
  margin: 0px;
  float: left;
  width: 100%;
  outline: 1px dashed black;
  margin-bottom: 20px;
}
@media (min-width: 500px) and (max-width: 799px) {
  .product {
    width: 50%;
  }
  .product:nth-child(2n+1) {
    clear: left;
  }
}
@media (min-width: 800px) and (max-width: 999px) {
  .product {
    width: 33.3%;
  }
  .product:nth-child(3n+1) {
    clear: left;
  }
}
@media (min-width: 1000px) {
  .product {
    width: 25%;
  }
  .product:nth-child(4n+1) {
    clear: left;
  }
}
/* 
      detailied styling of each .product 
    */

.producttitle {
  padding: 4px;
}
/* 
       display: table-cell; seems to be causing IE problem, when removed
       the image are displayed at the correct size and within the DIVs, but 
       not aligned to the bottom
    */

.productimage {
  display: table-cell;
  text-align: center;
  vertical-align: bottom;
  height: 100%;
  outline: 1px dashed red;
}
.product_todetails {
  outline: 0px solid black;
  display: table;
  width: 100%;
  padding: 4px;
  border-top: 1px dashed #000080;
}
.productprice {
  display: table-cell;
  font-size: 24px;
  vertical-align: middle;
  color: #000080;
}
.productmoredetails {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
}
.productmoredetails .btn-primary {
  background-color: #444;
  border: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">

  <div class="productrow">
    <!--  nth-child wrapper -->

    <div class="product">
      <div class='productimage'>
        <a href='a4ultra_detail.php'>
          <img class='a4_diary_image' src='http://solomon.ie/so/A4_test.gif'>
        </a>
      </div>

      <div class='producttitle'>
        <a href='a4ultra_detail.php'>A4  </a> 
      </div>

      <div class='product_todetails'>
        <div class='productprice'>
          &euro;10.00
        </div>
        <div class='productmoredetails'>
          <a href='#' class="btn btn-sm btn-primary">More info / buy</a>
        </div>
      </div>

    </div>


    <div class="product">
      <div class='productimage'>
        <a href='#'>
          <img class='a6_diary_image' src='http://solomon.ie/so/A6_test.gif'>
        </a>
      </div>

      <div class='producttitle'>
        <a href='#'>A6 - this can go onto several lines and the other DIVs will line up</a> 
      </div>

      <div class='product_todetails'>
        <div class='productprice'>
          &euro;10.00
        </div>
        <div class='productmoredetails'>
          <a href='#' class="btn btn-sm btn-primary">More info / buy</a>
        </div>
      </div>

    </div>


    <div class="product">
      <div class='productimage'>
        <a href='#'>
          <img class='a5_diary_image' src='http://solomon.ie/so/A5_test.gif'>
        </a>
      </div>

      <div class='producttitle'>
        <a href='#'>A5</a> 
      </div>

      <div class='product_todetails'>
        <div class='productprice'>
          &euro;10.00
        </div>
        <div class='productmoredetails'>
          <a href='#' class="btn btn-sm btn-primary">More info / buy</a>
        </div>
      </div>

    </div>


    <div class="product">
      <div class='productimage'>
        <a href='#'>
          <img class='quarto_diary_image' src='http://solomon.ie/so/Q_test.gif'>
        </a>
      </div>

      <div class='producttitle'>
        <a href='#'>Quarto</a> 
      </div>

      <div class='product_todetails'>
        <div class='productprice'>
          &euro;10.00
        </div>
        <div class='productmoredetails'>
          <a href='#' class="btn btn-sm btn-primary">More info / buy</a>
        </div>
      </div>

    </div>


    <div class="product">
      <div class='productimage'>
        <a href='#'>
          <img class='pocket_diary_image' src='http://solomon.ie/so/POCKET_test.gif'>
        </a>
      </div>

      <div class='producttitle'>
        <a href='#'>Pocket</a> 
      </div>

      <div class='product_todetails'>
        <div class='productprice'>
          &euro;10.00
        </div>
        <div class='productmoredetails'>
          <a href='#' class="btn btn-sm btn-primary">More info / buy</a>
        </div>
      </div>

    </div>


  </div>
  <!-- / nth-child wrapper -->


</div>
<!-- / panel-body -->
</div>
<!-- / panel -->

Answer 1

您可以使用flexbox代替。比display: table/table-cell

更适合布局

注意，您需要在其他IE10中添加前缀flexbox属性

更新/添加了CSS规则

.productimage {
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100%;
  outline : 1px dashed red;
}
.productimage a {
  flex: 0 0 auto;
  margin-top: auto;
}

示例代码段

function equalize(){
  var $maxImgHeight =0;
  var $maxTxtHeight =0;
  
  $('.productrow .productimage').each(function(i){
    if ($(this).height() > $maxImgHeight) { 
      $maxImgHeight = $(this).height();
    }
  });

  $(".productrow .productimage").height($maxImgHeight);

  $('.productrow .producttitle').each(function(i){
    if ($(this).height() > $maxTxtHeight) { 
      $maxTxtHeight = $(this).height();
    }
  });

  $(".productrow .producttitle").height($maxTxtHeight);


  //displayWindowSize();
}



function equalizeOnResize (){
  $(".productrow .productimage").height('auto');
  $(".productrow .producttitle").height('auto');
  equalize();
}



window.onresize = equalizeOnResize;
window.onload = equalize;

* {
  margin: 0;
  padding: 0;
  -webkit-padding-start: 0;
}
body {
  color: #444444;
  font-size: 16px;
  font-family: Arial;
  margin:0px;
}
.centered_content {
  max-width:1100px; 
  margin: auto;
}

/* 
  scale images to relative paper sizes
*/
.a4_diary_image {
  max-width: 100%;
}
.quarto_diary_image {
  max-width: 100%;
}
.a5_diary_image {
  max-width: 70%;
}
.a6_diary_image {
  max-width: 50%;
}
.pocket_diary_image {
  max-width: 40%;
}

/* 
  responsive grid for product categories - show 1,2,3 or 4 products 
  per row depending on screen size. first .product is mobile - rest 
  need to have a clear inserted into start of each new row so boxes line up evenly
*/

.product {
  background-color: white; 
  padding:10px 20px ;
  float: left;
  width: 100%;  
  outline: 1px dashed black;  
  margin-bottom: 20px;
}

@media (min-width: 500px) and (max-width: 799px) {
  .product {width: 50%;}
  .product:nth-child(2n+1){
      clear:left;
    }
}

@media (min-width: 800px) and (max-width: 999px){
  .product {width: 33.3%;}
  .product:nth-child(3n+1){
      clear:left;
    }
}

@media (min-width: 1000px) {
  .product {width: 25%;}
  .product:nth-child(4n+1){
    clear:left;
  }
}


/* 
  detailied styling of each .product 
*/

.producttitle {
  padding:4px;
}


/*   ***************************************
     used flexbox here instead of table-cell
*/
.productimage {
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100%;
  outline : 1px dashed red;
}
.productimage a {
  flex: 0 0 auto;
  margin-top: auto;
}
/*   ***************************************
*/


.product_todetails {
  outline: 0px solid black;  
  display:table;
  width: 100%;
  padding:4px;
  border-top: 1px dashed #000080;
}

.productprice {
  display: table-cell;
  font-size: 24px;
  vertical-align: middle;
  color: #000080;
}


.productmoredetails {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
}

.productmoredetails .btn-primary {background-color: #444;border:black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default ">
  <div class="panel-body">

    <div class="productrow">
      <!--  nth-child wrapper -->


      <div class="product">
        <div class='productimage'>
          <a href='a4ultra_detail.php'>
            <img class='a4_diary_image' src='http://solomon.ie/so/A4_test.gif'>
          </a>
        </div>

        <div class='producttitle'>
          <a href='a4ultra_detail.php'>A4  </a> 
        </div>

        <div class='product_todetails'>
          <div class='productprice'>
            &euro;10.00
          </div>
          <div class='productmoredetails'>
            <a href='#' class="btn btn-sm btn-primary">More info / buy</a>
          </div>
        </div>

      </div>


      <div class="product">
        <div class='productimage'>
          <a href='#'>
            <img class='a6_diary_image' src='http://solomon.ie/so/A6_test.gif'>
          </a>
        </div>

        <div class='producttitle'>
          <a href='#'>A6 - this can go onto several lines and the other DIVs will line up</a> 
        </div>

        <div class='product_todetails'>
          <div class='productprice'>
            &euro;10.00
          </div>
          <div class='productmoredetails'>
            <a href='#' class="btn btn-sm btn-primary">More info / buy</a>
          </div>
        </div>

      </div>


      <div class="product">
        <div class='productimage'>
          <a href='#'>
            <img class='a5_diary_image' src='http://solomon.ie/so/A5_test.gif'>
          </a>
        </div>

        <div class='producttitle'>
          <a href='#'>A5</a> 
        </div>

        <div class='product_todetails'>
          <div class='productprice'>
            &euro;10.00
          </div>
          <div class='productmoredetails'>
            <a href='#' class="btn btn-sm btn-primary">More info / buy</a>
          </div>
        </div>

      </div>


      <div class="product">
        <div class='productimage'>
          <a href='#'>
            <img class='quarto_diary_image' src='http://solomon.ie/so/Q_test.gif'>
          </a>
        </div>

        <div class='producttitle'>
          <a href='#'>Quarto</a> 
        </div>

        <div class='product_todetails'>
          <div class='productprice'>
            &euro;10.00
          </div>
          <div class='productmoredetails'>
            <a href='#' class="btn btn-sm btn-primary">More info / buy</a>
          </div>
        </div>

      </div>


      <div class="product">
        <div class='productimage'>
          <a href='#'>
            <img class='pocket_diary_image' src='http://solomon.ie/so/POCKET_test.gif'>
          </a>
        </div>

        <div class='producttitle'>
          <a href='#'>Pocket</a> 
        </div>

        <div class='product_todetails'>
          <div class='productprice'>
            &euro;10.00
          </div>
          <div class='productmoredetails'>
            <a href='#' class="btn btn-sm btn-primary">More info / buy</a>
          </div>
        </div>

      </div>


    </div>
    <!-- / nth-child wrapper -->


  </div>
  <!-- / panel-body -->
</div>
<!-- / panel -->

Answer 2

表格很成问题。细胞被迫至少与内容一样大，但如果你在内容中使用百分比，那么它就是一个圆形的定义。

因此CSS2.1将许多这些东西留作未定义的行为，因此浏览器的行为也不同。现在CSS表模块3试图解决这个问题，但它还不稳定。

通常对我有用的是：

相对定位细胞
绝对定位内容
使用top，right，bottom和left调整内容并根据需要将内容放入单元格内。

display：table-cell导致图像仅溢出其父div IE11

2 个答案: