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

最新推荐文章于 2024-04-22 15:36:45 发布

fullstack_lth

最新推荐文章于 2024-04-22 15:36:45 发布

阅读量5.2k

点赞数

分类专栏： HTML 文章标签：前端浏览器

本文链接：https://blog.csdn.net/u014744118/article/details/70230674

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

fullstack_lth

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
浏览器兼容问题项目总结（五）table中td和li高度问题

问题：在IE9、IE10、FF、chrome中table中td的高度不包含border的宽度，但是IE7和IE8中td的高度包含了border的高度，设置line-height和height一样。解决：暂无解决办法，只能通过判断浏览器解决。其问题示例如下：[html] view plain copy 设置line-height:20px
复制链接

扫一扫