HTML5 -img video flash等 在table 的td中有空隙问题
2017-07-04 10:51
337 查看
问题如图,本例中,在td中加入了flsh后,在HTML5中,FLASH和下面的表格之间有了间隙,为 了方便看出来,将TD的背景设成了绿色。
在网上找到原因和方案,特此记录。
a元素下有一个匿名文本,这个文本外有一个匿名行级盒子,它有的默认vertical-align是baseline的,而且往往因为上文line-height的影响,使它有个line-height,从而使其有了高度,因为baseline对齐的原因,这个匿名盒子就会下沉,往下撑开一些距离,所以把a撑高了。
解决办法一是消除掉匿名盒子的高度,也就是给a设置line-height:0或font-size:0;
解决办法二是给两者vertical-align:top,让其top对齐,而不是baseline对齐
解决办法三是给img以display:block,让它和匿名行级盒子不在一个布局上下文中,也就不存在行级盒的对齐问题
其他解决办法也有,但这些都是从根本上解决问题
作者:张丰麟ZFL
链接:https://www.zhihu.com/question/26821863/answer/65552730
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
下面上代码
<style type="text/css"> img { border:0;/*以下三个设置可去除蓝色边框*/ margin:0; padding:0; display:block;/*去图片中的间隙*/ } /*<!--*{margin:0;padding:0;padding-bottom:0} -->*/ </style>.....
<table bgcolor="#00FF00" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse"> <tr> <td><img src=bbb.jpg"></td> </tr> <tr> <td > <embed src="aaa.swf" width="778" height="202" style="vertical-align:top" ></embed><!--flash,style中为设置--> </td> </tr> </table> <table>..........
红色部分为加入的代码,经测试,改成下面的也可以
style="display:block"
这些代码仅供测试。
经测试都可以。<video>也可以。
总结
style="vertical-align:top"
style="display:block"
style="line-height:0"或style="font-size:0"
相关文章推荐
- IMG与元素边界有空隙问题分析及解决
- table中td内容换行问题
- IE浏览器table中的TD无数据边框不显示问题
- 关于多个div中table的td对齐问题
- Android HTML5 Video视频标签自动播放与自动全屏问题解决
- css背景透明可用于img,td table
- 关于 HTML5 video全屏问题 的解答
- html5 video 手机上播放和下载的问题
- html5 td中的5它空隙--待解决
- 开发日志:struts标签[<s:selec>/<s:submit>/<s:form>......] 在table的时候位置错误 [会自动换行/自动生成tr、td的问题]
- 解决img标签空隙问题
- 码农眼中的HTML5和Flash 之Video
- 设置<img>在表格<table>中的单元格<td>中水平垂直居中
- 使用Html5 video在iPad/iPhone上碰到的几个问题
- (工作笔记)table中td内容换行问题
- Table宽度 Td宽度问题
- ZK中关于table的纵向跨行td问题
- 有关HTML5 Video对象的ontimeupdate事件的问题
- html页面中关于一个table表格中设置上下2个td宽度一致的问题