0

我有一个<td>that hasvalign="bottom"和包含在 td has 中的文本font-size:100px。

如何摆脱<td>.

请在此处找到示例代码 http://jsfiddle.net/jM8JC/1/

4

4 回答 4

1

While you can do this, you shouldn't. The reason there's extra space between the the lower edge of the word and the bottom border is that's where the lower parts, the descender of the y, g, etc, goes: http://jsfiddle.net/davidThomas/jM8JC/17/ (in this demo I've set line-height to 1 (no unit), which places the bottom edge of the y against the lower border.

Adjusting the line-height to 0.65 places the lower edge of the word test against the bottom border, but it's a fairly arbitrary measurement, and dependent upon the font-size used, and, probably, the particular browser.

And if you add overflow: hidden you can also hide the descending portion of the y if you wish: http://jsfiddle.net/davidThomas/jM8JC/25/

于 2012-07-19T18:32:53.820 回答
0
于 2012-07-19T18:30:36.310 回答
0

You can specify line-height:75pxfor the TD

<table border="1" cellpadding="0" cellspacing="0" width="100%" height="200px">
    <tr>
        <td valign="bottom" class="test" style="font-size:100px; line-height:75px;">
            test
        </td>
    </tr>
</table>​

See an updated fiddle here: http://jsfiddle.net/jM8JC/22/

于 2012-07-19T18:30:49.617 回答
0

Just set a line height smaller than text size. Like this: http://jsfiddle.net/jM8JC/16/

于 2012-07-19T18:31:12.303 回答