display：table-cell导致图像仅溢出其父div IE11
我在响应式网格中显示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'>
€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'>
€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'>
€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'>
€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'>
€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 -->
2 个答案:
答案 0 :(得分：2)
您可以使用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'>
€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'>
€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'>
€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'>
€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'>
€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 -->
答案 1 :(得分：0)
表格很成问题。细胞被迫至少与内容一样大，但如果你在内容中使用百分比，那么它就是一个圆形的定义。
因此CSS2.1将许多这些东西留作未定义的行为，因此浏览器的行为也不同。现在CSS表模块3试图解决这个问题，但它还不稳定。
通常对我有用的是：
- 相对定位细胞
- 绝对定位内容
- 使用
top，right，bottom和left调整内容并根据需要将内容放入单元格内。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？