display:table style deviates by several pixels in different browsers.
css:
.tbodyContent span{
text-align: center;
display: table-cell;
vertical-align: middle;
}
.tbodyContent>div{
display: table;
}
.trDiv:nth-child(even){
height: 145px;
width: 1080px;
background-color:-sharpB6D7A8
}
.trDiv:nth-child(odd){
height: 145px;
width: 1080px;
background-color:-sharp7F6000
}html:
<div class="tbody" style="height:580px;">
<div class="tbodyContent" style="height: 100%;">
<div class="trDiv">
<span style="width: 15%;">1</span>
<span style="width: 40%;">2</span>
<span style="width: 30%;">3</span>
<span style="width: 15%;">4</span>
</div>
<div class="trDiv">
<span style="width: 15%;">1</span>
<span style="width: 40%;">2</span>
<span style="width: 30%;">3</span>
<span style="width: 15%;">4</span>
</div>
<div class="trDiv">
<span style="width: 15%;">1</span>
<span style="width: 40%;">2</span>
<span style="width: 30%;">3</span>
<span style="width: 15%;">4</span>
</div>
<div class="trDiv">
<span style="width: 15%;">1</span>
<span style="width: 40%;">2</span>
<span style="width: 30%;">3</span>
<span style="width: 15%;">4</span>
</div>
</div>
</div> the same code in chrome 66 version:
145px144px
firefox:
as shown above, the height is the same as the 145px in the style.
could you tell me how to operate chrome so that the height will not shrink?