为什么我在这个示例中得出错误的表总高度:http://jsfiddle.net/nfb82/
我为每个细胞指定了高度和宽度。总的来说,我需要获得160x90的桌面尺寸。当我得到错误的高度时,正确计算宽度。而且,在我的网站上我获得97px,在jsfiddle例子中我有101px。 我想到了可以考虑的边界,但为什么我得到正确的宽度。此外,我试图改变高度(每个细胞高度减少1px),但无论如何我的身高都错了
HTML:
<div class="template-markup _16x9" data-template-id="2">
<table>
<tbody>
<tr>
<td rowspan="2" style="width: 128px; height: 72px;">1</td>
<td style="width: 32px; height: 32px;">2</td>
</tr>
<tr>
<td style="width: 32px; height: 40px;">3</td>
</tr>
<tr>
<td colspan="2" style="height: 18px; width: 160px;">4</td>
</tr>
</tbody>
</table>
<div class="resolution">1920x1080</div>
</div>
的CSS:
.template-markup {
float: left;
margin-right: 20px;
}
.template-markup table {
border: 1px solid #333;
border-collapse: collapse;
}
.template-markup table tr td {
border: 1px solid #333;
vertical-align: middle;
text-align: center;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.template-markup table tr td:hover {
background-color: #DDD;
}
.template-markup table tr td.selected {
background-color: #333;
color: #FFF;
}
.template-markup .resolution {
text-align: center;
clear: both;
height: 30px;
margin-top: 5px;
}
.template-markup._16x9 {
width: 160px;
}
.template-markup._16x9 table {
width: 160px;
height: 90px;
}