关于HTML5的重大BUG

zoujiawei6 2016-08-03 03:38:54

有一个页面如下：



<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<title>test</title>

	<style type="text/css">

		.a{

			background: #000;

		}

	</style>

</head>

<body>

	<span class="a">	

        <img src="http://p0.so.qhimg.com/bdr/326__/t014aa638d6cfb7129a.jpg">

    </span>

</body>

</html>

运行显示时发现：

图片下面与body的白色之间...

我同事问我：为什么图片下面会多出个黑边。
恩，为什么会多出个黑边。
为什么会多出个黑边。
为什么有个边！！！

IE、火狐、360；手机UC测试无一幸免。

求：怎么解决？

...全文

226 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

zoujiawei6 2016-08-04

打赏
举报

引用 7 楼 perhapschen 的回复:

这个应该不算bug，html4就有的，盒子模型的渲染方式，img默认的vertical-align: baseline;就是底部黑线的由来
img{vertical-align: middle;}

/*or*/
img{vertical-align: top | bottom;}

/*or*/
img{display: block;}

这个可以解决问题。这可能不是BUG，也许只是我对BUG的观念有些误解罢了。

清辞 2016-08-04

打赏
举报

还有一种方法，就是设置span的 font-size:0

raistlic 2016-08-03

打赏
举报


img {
  display: block;
}
.a {
  background: #000;
  display: inline-block;
}

标题党

cocotsau 2016-08-03

打赏
举报

这个应该不算bug，html4就有的，盒子模型的渲染方式，img默认的vertical-align: baseline;就是底部黑线的由来


img{vertical-align: middle;}

/*or*/
img{vertical-align: top | bottom;}

/*or*/
img{display: block;}

KK3K2005 2016-08-03

打赏
举报

span： display：block img: display:block border:0

___紫菜 2016-08-03

打赏
举报

span添加 display: inline-block; height: 高度等于图片高度

obliviousSing 2016-08-03

打赏
举报

img{ width:100%; }

zoujiawei6 2016-08-03

打赏
举报

@jslang、@u011110994并没有效果哦


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>test</title>
	<style type="text/css">
		*{margin:0;padding:0}
		.a{
			background: #000;
		}
	</style>
</head>
<body>
	<span class="a"><img src="http://p0.so.qhimg.com/bdr/326__/t014aa638d6cfb7129a.jpg"/></span>
</body>
</html>