`
liningjustsoso
  • 浏览: 47367 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

<!DOCTYPE html>声明导致布局中div与图片相差5像素的bug

    博客分类：
  • css
html 
阅读更多
最近一次把网站html头部的声明由 
<!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。
举例代码如下: 
<div>
  <img src="demo.jpg" alt="" width="100" height="100" border="0">
</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块进行高度设置
分享到：
| css兼容性问题：ie6,ie7中overflow:hidde ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML !DOCTYPE 标签 声明HTML版本

    DOCTYPE&gt; 声明，这样浏览器才能获知文档类型。 HTML 4.01 与 HTML5 之间的差异 在 HTML 4.01 中有三种 &lt;!DOCTYPE&gt; 声明。在 HTML5 中只有一种： &lt;!DOCTYPE html&gt; HTML 元素和文档类型（Doctype） 提示和注释 ...

    前端面试题

    一、单选题（每题2分，共10分） 1、以下哪一个是html5的dtd A &lt;!DOCTYPE html&gt; B &lt;!DOCTYPE HTML PUBLIC&gt; C &lt;!DOCTYPE xhtml&gt; D &lt;!...C &lt;span&gt;&lt;h1&gt;&lt;p&gt;&lt;img&gt;&lt;dl&gt; D &lt;div&gt;&lt;p&gt;&lt;form&gt;&lt;ul&gt;&lt;h1&gt;

    文章配套网页源代码-HTML <!DOCTYPE> 声明

    博客文章： 关于HTML中的 &lt;!DOCTYPE&gt; 声明 文章配套示例HTML源代码 内容说明：DOCTYPE是Document Type（文档类型）的简写，要想制作符合标准的HTML页面，一个必不可少的关键组成部分就是DOCTYPE声明。

    购物车代码

    .println("&lt;table align='center'&gt;&lt;tr&gt;&lt;th&gt;图片&lt;/th&gt;&lt;th&gt;产品名称&lt;/th&gt;&lt;th&gt;产品价格&lt;/th&gt;&lt;th colspan=2&gt;操作&lt;/th&gt;&lt;/tr&gt;"); try { DBaccess db = new DBaccess(); ArrayList&lt;Goods&gt; goods = db.Search...

    为什么使用DOCTYPE HTML

    DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; 好在现在的各种web开发工具都足够强大，支持插入模板代码，因此你并不需要把这又...

    王者荣耀排位代练接单网站源码HTML带手机版.rar

    王者荣耀排位代练接单网站源码HTML带手机版.rar

    apache-tomcat-8.0.50-windows-x64

    Web服务器，apache-tomcat-8.0.50-windows-x64，绿色免安装版。

    javascript 写的计算器

    用javascript写的,功能一般,纯属个人练习,供参考,见笑

    【JavaScript源代码】JavaScript实现限时秒杀功能.docx

    DOCTYPE html&gt;　&lt;html&gt;　&lt;head&gt;　&lt;meta charset="utf-8"&gt;　&lt;title&gt;&lt;/title&gt;　&lt;/head&gt;　&lt;body&gt;　&lt;div class="box"&gt;　&lt;div id="d"&gt;&lt;/div&gt; &lt;!-- 剩余的天数 --&gt;　&lt;div id="h"&gt;&lt;/div&gt; &lt;!-- 剩余的小时 --&gt;　&lt;div id="m...

    水果忍者HTML5+JS源码

    而今天要介绍的则是一个由 HTML5+Javascript 技术编写的“水果忍者”，和之前介绍过的HTML5版本的割绳子、宝石迷阵一样，你完全不需要下载或安装任何东西，直接在浏览器就能玩游戏！不过呢，重点是这个山寨网页版的...

    网页 DOCTYPE html标签的作用1

    DOCTYPE&gt; 声明位于文档中的最前面的位置，处于 &lt;html&gt; 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。如果不写，可能会造

    模拟全自动洗衣机程序

    模拟全自动洗衣机程序程序报括洗涤漂洗脱水温控等功能，模拟全自动洗衣机程序

    跨年烟花代码-HTML

    &lt;div class="firework-container" &gt; &lt;header&gt; &lt;h1 style = "text-align:center"&gt;2022 HappyNewYear! ! ! !&lt;/h1&gt; &lt;/header&gt; &lt;/div&gt; &lt;!-- &lt;audio autoplay="autoplay" controls="controls" loop="loop" ...

    动态网页爱心源码，支持修改文字和音乐

    网页动态爱心代码，支持修改文字和更好音乐等操作。

    HTML和XHTML的联系与区别,文档类型<!DOCTYPE>

    NULL 博文链接：https://liuzidong.iteye.com/blog/850929

    index.html

    -- charset="UTF-8"：声明该文档的字符编码集是UTF-8,如果不写，就会导致中文乱码 --&gt; &lt;!-- mate标签可以描述该文档的作者，项目说明，关键词等等的一些元信息 --&gt; &lt;meta charset="UTF-8"&gt; &lt;!-- 该文档的标题标签...

    texiao991_1560680964.zip

    超级实用的html5制作15种数字时钟样式代码 超级实用的html5制作15种数字时钟样式代码&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;canvas clock&lt;/title&gt; &lt;style type="text/css"&gt; div{ ...

    python爬虫Scrapy(一)-我爬了boss数据

    Python，使用Scrapy爬取Boss直聘数据。 资源讲解地址：https://www.cnblogs.com/swarmbees/p/10011898.html

    firework.html

    方便初学者，借鉴学习javascript语言

    element-ui 2.15.9下载到本地资源最新版本压缩包（附element-ui本地引用方法）

    本地引用示例： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;my&lt;/title&gt; &lt;script src="/my/html/vue.min.js"&gt;&lt;/script&gt; &lt;script src="/my/... &lt;el-col :span="24"&gt;&lt;div class="myclass"&gt;&lt;/div&gt;&lt;/el-col&gt; &lt;/el-row&gt;

Magicbox
Global site tag (gtag.js) - Google Analytics