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

来源：互联网发布：淘宝热卖商品排行榜编辑：程序博客网时间：2024/06/05 20:38

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>

0 0