浏览器兼容问题项目总结（五）table中td和li高度问题

最新推荐文章于 2023-09-21 11:51:59 发布

原创最新推荐文章于 2023-09-21 11:51:59 发布 · 5.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #浏览器

HTML 专栏收录该内容

3 篇文章

订阅专栏

本文总结了浏览器兼容性问题，重点讨论了在不同浏览器中table td的高度差异，包括IE7和IE8与现代浏览器的区别，以及如何处理li元素在IE7下高度设置导致的排版错位问题，解决方案涉及line-height的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、td高度

问题：

在IE9、IE10、FF、chrome中table中td的高度不包含border的宽度，但是IE7和IE8中td的高度包含了border的高度，设置line-height和height一样。

解决：

暂无解决办法，只能通过判断浏览器解决。

其问题示例如下：

<spanstyle="font-size:18px;"><body > 
<table> 
<tr> 
<td style="line-height:20px;border:5px solid red;">设置line-height:20px</td> 
</tr> 
</table> 
<table> 
<tr> 
<td style="height:20px; border:5pxsolid red;">设置height:20px</td> 
</tr> 
</table> 
</body></span>

2、li高度

问题：

在IE7下如果为li指定高度可能会出现排版错位，其他浏览器无此现象

解决：

设置line-height

实例：

<spanstyle="font-size:18px;"><style type="text/css"> 
li{ 
list-style-position:inside; 
} 
　　</style> 
</head><body >

解决前：

<listyle="height:40px;">hello</li> 
<listyle="height:40px;">hello</li> 
<listyle="height:40px;">hello</li> 
<listyle="height:40px;">hello</li>

解决后：

<listyle="line-height:40px;">hello</li> 
<listyle="line-height:40px;">hello</li> 
<listyle="line-height:40px;">hello</li> 
<listyle="line-height:40px;">hello</li> 
</body></span>