您的位置：首页 > Web前端

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

2017-04-18 17:29 351 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端浏览器

相关文章推荐

新的分享

章节导航