Tho*_*hom 9 html5 row html-table
我查看了网站,但由于它与html5有关,因此无法找到解决此特定问题的任何内容.虽然我总是可以忽略它...如何使用html5在表格中获得1px的行高？以下代码在html 4.01中按预期工作(我已经抛出所有内容,包括厨房水槽,试图在html5中将行高仅为1px,添加背景颜色以显示表格行):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body style="background-color:#F3F3F3;">
<table style='width:500px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; margin:0px;'>
<tr style="line-height:1px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; height:1px; margin:0px; max-height:1px;">
<td style="background-color:red; line-height:1px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; height:1px; margin:0px; max-height:1px;">
<img style="width:100%; height:1px;" src="/images/pixsolid.gif" alt=''>
</td>
</tr>
</table>
</body></html>
它显示为您所期望的,作为1像素高的行.
但是,如果我使用相同的代码与doctype:
<!DOCTYPE html>
它显示为6像素高的行...前5个像素,背景颜色为红色,然后是1像素高的图像线.(我会发布实际图片,但我是新来的,StackOverflow不会让新手发布图片.)
最新版本的Firefox,Chrome和IE中的问题似乎相同,所以我希望我遗漏了一些东西......
任何建议将不胜感激.
小智 7
我对包含图像的HTML表有同样的问题.将文档类型更改为HTML 5后,Chrome,Firefox和IE显示的表格单元格的高度大于图像,而单元格之前的大小与其包含的图像一样大.
似乎对于HTML 5,浏览器将调整表格单元格的大小不小于字体大小和行高度允许的文本内容.因此,为了实现与之前相同的外观,我使用了以下内联CSS规则:
<table style="font-size: 1px; line-height: 0;">
...
</table>
您是否尝试过删除所有额外的内联 CSS 并尝试这样做？
不管怎样，您正在从 HTML 4 过渡文档类型更改为 HTML 5，因此您可能可以在HTML5 规范中找到答案。
但是，如果您不想进行大量阅读，这里有一些建议：我见过人们成功地使用 em 而不是 px。您的问题是，在某些情况下，HTML5 中的行高显示与 4-transitional 中的行高不同。尝试删除所有内联 CSS（并且最好添加样式表！！），然后慢慢添加并使用填充等，可能会揭示您的问题。