HTML5 -img video flash等 在table 的td中有空隙问题
来源:互联网 发布:淘宝宝贝口袋在哪 编辑:程序博客网 时间:2024/05/21 08:52
问题如图,本例中,在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"
阅读全文
0 0
- HTML5 -img video flash等 在table 的td中有空隙问题
- img之间有空隙的问题
- HTML,用表格单元格放置图片 <img>,</td><td>之间的回车会使得图像之间有空隙
- 图片IMG与容器下边界有空隙(如td被里边的img顶高了)
- 淘宝里table中tr之间有空隙的解决方法
- html5下表格中插入图片的空隙问题
- 解决CSS下img图片多余空白或者是表格中有空隙Bug的方案
- IMG与元素边界有空隙问题分析及解决
- 关于td中嵌套table,table中有tbody tr td,在ie8上怎么完全填充table
- 设置<img>在表格<table>中的单元格<td>中水平垂直居中
- css img周围有空隙
- 两个img之间有空隙
- HTML5 图片<img/>下边界出现空隙,去除空隙的解决方法
- 图片IMG与容器下边界有空隙的解决方法
- 图片IMG与容器下边界有空隙的解决方法
- <li><img>图片间有空隙的解决方法
- 删除<table>中有<td>等于某值的行
- 解决img标签空隙问题
- spring-mvc jsp表单提交 不同POJO的相同属性[同名参数]
- JS实现为控件添加倒计时功能
- Eclipse取消或者关闭tomcat所有自动发布(部署)方法
- WMS GetFeatureInfo (Layers)——WMS获取要素信息(图层)
- Common Beanutils的简易理解
- HTML5 -img video flash等 在table 的td中有空隙问题
- idea 使用快捷键
- iOS响应式架构
- 损失函数 center_loss triplet loss
- zookeeper的启动方式
- 设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。
- 解决bootstrap中glyphicon无法显示图标只显示方框的问题
- vim:安装问题 & 解决方案 & 查看语法教程
- 101Symmetric Tree判断对称二叉树dfs