我只在IE 6,7,8和FF 3.6.3中测试了这个。
testing td checkBoxestr {
height: 1px;
}
td {
border: 1px solid #000;
height: 100%;
}
label {
display: block;
border: 1px solid #f00;
min-height: 100%; /* for the latest browsers which support min-height */
height: auto !important; /* for newer IE versions */
height: 100%; /* the only height-related attribute that IE6 does not ignore */
}
Some column title | Another column title |
Value 1 (a bit more info) |
这里的主要技巧是定义行的高度,这样我们可以在他们的孩子(单元格)上使用100%的高度,然后在单元格的子节点(标签)上使用100%的高度。这样,无论单元格中有多少内容,它将强制扩展其父行,并且其同级单元格将跟随。由于标签具有其父级的100%高度,其高度已定义,因此也将垂直扩展。
第二个和最后一个技巧(但同样重要)是使用CSS hack的min-height属性,如注释中所解释。
希望这可以帮助 !