在IE11中表细胞高度计算不同 [英] Table cells height calculated differenly in IE11
问题描述
我遇到的问题是,IE 11似乎在单个< 之间有不一致的
< td>
这里是一个说明我的问题的笔:。
var spans = document.querySelectorAll(span.bar),count = spans.length; while(count--){spans [count] .style.height = spans [count] .parentElement.offsetHeight +px ;}
body {padding:15px;} table {border :1px实心黑色; border-spacing:10px; cell-spacing:0; } tr {border:1px solid red;} td {vertical-align:center;位置:相对; box-sizing:border-box;位置:相对; border:1px solid black;} td .bar:first-child,td .bar:last-child {display:block;背景:绿色; width:3px; left:-5px;高度:100%; position:absolute; top:0; z-index:1;} p {margin:0; background-color:#dedede; padding:0px;}。tall {height:100px;}。medium {height:60px;}。short {height:30px;}
< table cellspacing =1cellpadding0border =0> < tr> < td> < / p>< span class =bar>< / span>< span class =bar>< < / td> < td>
The problem I face is IE 11 seem to have inconsistent <td>
inner height across single <tr>
while other browsers keep it the same.
Here's a pen illustrating my problem: http://codepen.io/anon/pen/emKEBZ
In my layout I have an absolutely positioned pseudo-element (green border) which I want to display on a (outside) <td>
. I'd like it to be always as high as the whole <tr>
it is in. The content of <td>
s is dynamic - I have no control over it's size (like I do in the pen).
I gave it height: 100%
, assuming that every <td>
in a row has the same height.
td {
position: relative;
}
td:before {
content: "";
display: block;
position: absolute;
top: 0;
left: -5px;
width: 3px;
height: 100%;
background-color: green;
}
And yeah, that height calculates to the same value across all of the cells in the same row in Firefox and Chrome:
but to different height for each cell in IE 11:
The problem seems to be that in height: 100%
IE refers to the inner height (the one inside the padding) of the containing <td>
, while other browsers take total height (height + padding + border). And even then, the inner height of all <td>
s along one <tr>
is identical in Firefox, while it isn't in IE. Is any of those approaches wrong? Is there a way to force IE to work like other browsers do?
I finally managed to do that. Here is the code, hope it helps. Fiddle here.
var spans = document.querySelectorAll( "span.bar" ),
count = spans.length;
while ( count-- ) {
spans[count].style.height = spans[count].parentElement.offsetHeight + "px";
}
body {
padding:15px;
}
table {
border: 1px solid black;
border-spacing: 10px;
cell-spacing: 0;
}
tr {
border: 1px solid red;
}
td {
vertical-align:center;
position:relative;
box-sizing: border-box;
position: relative;
border: 1px solid black;
}
td .bar:first-child,
td .bar:last-child {
display: block;
background: green;
width: 3px;
left: -5px;
height: 100%;
position: absolute; top: 0;
z-index: 1;
}
p {
margin: 0;
background-color: #dedede;
padding: 0px;
}
.tall {
height: 100px;
}
.medium {
height: 60px;
}
.short {
height: 30px;
}
<table cellspacing="1" cellpadding "0" border="0">
<tr>
<td>
<span class="bar"></span><p class="tall">Save me!</p><span class="bar"></span>
</td>
<td>
<span class="bar"></span><p class="medium">From problems</p><span class="bar"></span>
</td>
<td>
<span class="bar"></span><p class="short">With IE</p><span class="bar"></span>
</td>
</tr>
</table>
这篇关于在IE11中表细胞高度计算不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!