让div与图片相差5像素bug的解决方法

发布时间:2019-12-26编辑:脚本学堂
当我们把网站html头部的声明改成了DOCTYPE html时,在布局div与图片时出现5像素bug,如何解决呢?请看文中的介绍。

声明Html代码
 

复制代码 代码示例:
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

改成了
 

复制代码 代码示例:
<!DOCTYPE html>
 

接下来便出现了一些细微的bug,发现某些没有设置图片div块会出现相差5像素的bug。
举例代码如下:
 

复制代码 代码示例:
1.<div>
2.  <img src="demo.jpg" alt="" width="100" height="100" border="0">
3.</div>

当没有设置div高度的时候。在chrome中审查元素会发现div的高度是105像素。

现在的解决办法:
1、就是把声明改回原来的
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

2、对没有设定高度的图片div块进行高度设置。