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

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

    博客分类:
  • css
阅读更多
最近一次把网站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块进行高度设置
分享到:
评论

相关推荐

    HTML !DOCTYPE 标签 声明HTML版本

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

    网页 DOCTYPE html标签的作用1

    DOCTYPE html&gt;` 是HTML5规范中的声明方式,它表明当前文档是一个符合HTML5标准的网页。在HTML5之前,不同的DOCTYPE声明对应着不同的HTML或XHTML版本,例如: - HTML4.01 Strict:`&lt;!DOCTYPE HTML PUBLIC "-//W3C//...

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

    DOCTYPE&gt;`声明会导致浏览器进入不同的渲染模式,如quirks mode(兼容模式)和standards mode(标准模式)。在标准模式下,浏览器会遵循W3C的标准,提供更一致的跨平台表现。 在实际开发中,选择HTML还是XHTML取决于...

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

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

    为什么使用DOCTYPE HTML

    DOCTYPE HTML 是HTML文档中的一个重要声明,它告诉浏览器文档遵循的HTML或XHTML规范。这个声明位于HTML文档的开头,通常在`&lt;html&gt;`标签之前。它的作用在于确保浏览器以正确的方式解析和渲染网页内容。 在没有...

    HTML !DOCTYPE 标签.docx

    DOCTYPE&gt;`标签是文档类型声明,它在HTML或XHTML文档的开头,用于告诉浏览器文档遵循的HTML或XHTML规范。这个声明非常重要,因为它会影响浏览器如何解析和渲染页面内容。`&lt;!DOCTYPE&gt;`标签没有闭合标签,即它不需要以`...

    web开发设计教程,常用指令讲解,实际案例资源代码详细讲解并附注释.txt

    DOCTYPE html&gt;声明这是一个 HTML5 文档。 &lt;html&gt;标签包裹整个 HTML 文档。 &lt;head&gt;标签包含文档的元数据,如标题。 &lt;title&gt;定义网页的标题,显示在浏览器标签页上。 &lt;body&gt;包含网页的可见内容。 &lt;h1&gt;是一级标题。 &lt;p&gt;...

    模拟全自动洗衣机程序

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

    index.html

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

    HTML &lt;!DOCTYPE&gt; 标签

    在不同的浏览器中,如果没有声明DOCTYPE,页面可能会在不同的渲染模式下显示,导致布局和样式差异。例如,Firefox(FF)和Internet Explorer(IE)在默认情况下对非DOCTYPE声明的HTML有不同的解释。因此,为了避免...

    HTML5程序设计学习笔记

    DOCTYPE&gt;`声明,即`&lt;!DOCTYPE html&gt;`,适用于所有类型的HTML5文档。 ##### **1.4 常用的`&lt;!DOCTYPE&gt;`声明示例** - **HTML5**:`&lt;!DOCTYPE html&gt;` - **HTML4.01 Strict**:`&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD ...

    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;

    HTML 版本声明 DOCTYPE 标签

    虽然DOCTYPE声明在HTML5中对大小写不敏感,但通常推荐使用大写的“&lt;!DOCTYPEhtml&gt;”。这种习惯性的写法有助于让DOCTYPE声明更易于识别,并且符合W3C标准的要求。 在编写网页时,DOCTYPE声明非常重要,因为它告诉...

    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{ ...

    firework.html

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

    HTML 元素与合法的 Doctype.docx

    例如,`&lt;a&gt;`、`&lt;p&gt;`、`&lt;div&gt;`等元素在所有列出的DOCTYPE中都是合法的,而`&lt;applet&gt;`仅在HTML 4.01中被支持,不适用于XHTML 1.1。 理解DOCTYPE对于编写兼容性良好的HTML代码至关重要,因为它会影响浏览器的渲染模式...

    JavaScript.福彩36选7.rar

    部分代码实现 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;福彩&lt;/title&gt; ...&lt;div&gt; &lt;img src="images/fucai.jpg"/&gt; &lt;/div&gt; &lt;h1&gt;本期幸运号码为:&lt;/h1&gt; &lt;p id="luckyNumbers"&gt;&lt;/p&gt;

    表格 html 表格 html 表格 html

    &lt;table border="1" cellspacing="10" cellpadding="5"&gt; &lt;tr&gt; &lt;td&gt;单元格内容&lt;/td&gt; &lt;td&gt;单元格内容&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;单元格内容&lt;/td&gt; &lt;td&gt;单元格内容&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; ``` #### ...

    初学-html中如何让图片放左边,文字紧邻着放右边

    在HTML中,将图片放在左边并让文字紧邻着放在右边是常见的布局需求,这主要涉及到元素的浮动、布局和样式控制。以下是一份详细的知识点解析: 首先,要实现图片在左,文字在右的效果,可以使用CSS的`float`属性。`...

Global site tag (gtag.js) - Google Analytics