html5 包含img的父级元素多出几像素的问题
html代码：
<!doctype html>
<html>
<head>
<meta charset="gbk" />
<title>HTML5图片元素显示测试</title>
<style>
*{margin:0; padding:0;}
body{background:#eee;}
#box{width:717px;margin:8% auto 0; background:blue;border:3px solid #aaa;}
</style>
</head>
<body>
<div id="box">
<img src="html5-img-bug.jpg" alt="" width="717" height="412" />
</div>
</body>
</html>
效果图：（其中蓝色部分为多出来的几像素，#box的高度并不是img的高度）
解决方案：
1.第一种方案：图块状显示;
#box img {display:block;}
2.第二种方案：父级元素定义为img的宽和高
3.第三种方案：将支持 valign 特性的对象的内容与对象底端对齐，使用此方法，同样可以解决IE6在XHTML中的图片显示效果。
img{vertical-align:bottom;}
