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

仅IE6/7浏览器SPAN元素包含块级元素会使SPAN的背景色显示

 
阅读更多

这个bug发生在下面的网页，如下：

 

http://yyhygw.blog.sohu.com/204511710.html

 

用户博客文字在IE下有背景色，其它浏览器没有。

 

重现代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
	
<span style="background-color:gray;">
	<p>block element</p>
	<div>block element</div>
	<span>inline element</span>
</span>

</body>
</html>

 

IE6/7：

 

Firefox/Safari/Chrome/Opera：

 

 

以上代码，SPAN添加了背景色，其包含了两个块级元素P和DIV，一个行内元素SPAN。我们知道行内元素是不允许包含框架元素的，否则出现一些怪异情况。

 

如上，无论块级元素或行内元素 IE6/7 均显示了其背景色，但 Firefox/Safari/Chrome/Opera/IE8/IE9 则不显示SPAN中的DIV和P背景色。

 

 

  • 大小: 1.3 KB
  • 大小: 1.6 KB
0
顶
0
踩
分享到：
| JavaScript中“+”的陷阱
评论
发表评论

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

相关推荐

    span 右浮动折行 解决ie6/7中span右浮动折行问题

    RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部 标准参考 W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻时的情况有如下解释。以下是关键段落： ...

    html如何对span设置宽度

    span 表示行内元素，相当于 inline 属性，只会根据元素的宽度自行展开，自己设置宽度，不起作用。 那如果我特别希望将 span 元素设置为宽度且不设置元素呢？下面通过几个方式去实现。 方式一 设置 span 属性为 span{...

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    1.复合选择器 （1）后代选择器（包含选择器 重要） 语法： 元素1 元素2 {样式声明} ...（7）背景色半透明 background：rgba（0,0,0,0.3）取值0-1 0.3也可以写成.3 背景色半透明 盒子里面内容不受影响

    进一步理解CSS编程中的块级元素和行内元素

    Block element 块级元素顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的、、默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。...

    Span元素的width属性无效果原因及解决方案

    先运行下程序看下: &lt;span xss=removed&gt;123&lt;/span&gt; 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内联元素(可以是默认即为内联的比如 span 元素，也可以是 display: inline 的元素) width 和 ...

    对行内元素和块级元素的一些认识

    一、常见块级元素有哪些： button,div , dl ,dt ,form , h1 ,h2 ,h3 , h4 ,h5 ,hr ,li ,ul ,table系列，button； 二、常见行内元素有哪些： img ,a ,input ,textarea ,b ,br ,span, select ,label ,map ,strong ; 三...

    Android带图片背景的span

    带图片背景的span

    关于css 行元素和块元素 相互转换 居中

    与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素...

    css的核心内容 标准流、盒子模型、浮动、定位等分析

    1、块级元素：如：&lt;div&gt;&lt;/div&gt;2、行内元素：如：&lt;span&gt;&lt;/span&gt;从效果中看块级元素与行内元素的区别： 通过CSS的设置把行内元素转换成块级元素： 标准流：就是标签的排列方式。我的未来不是梦&lt;/div&gt;&lt;span id=st ...

    ie_png.js---实现ie6中css调用的png图片透明

    --[if lt IE 7]&gt; // less than ie 7 &lt;script type="text/javascript" src="image/ie_png.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; ie_png.fix('.png, .menu ul li a span'); // 第二个参数为含有png的标签...

    electron做一个丐版浏览器，只有输入网址显示网页的功能，适合学习

    electron做一个丐版浏览器，只有输入网址显示网页的功能，适合学习 博客：用electron做一个浏览器 博客地址：https://tinycool.blog.csdn.net/article/details/124565497

    CSS DIV元素与SPAN元素的区别

    两者最明显的区别是：DIV(division)是一个块级元素，可以包含段 落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不...

    SPAN元素和DIV元素有的区别

    SPAN元素和DIV元素有的区别

    Web前端基础：HTML5文本标签.pptx

    浏览器会自动地在段落的前后添加空行是块级元素 2 2 &lt;div&gt; 元素是块级(block)元素，它是可用于组合其他HTML元素的容器。 &lt;div&gt; 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后换行。 &lt;span&gt; ...

    div和span的区别

    div是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。 Span: span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上...

    Voxengo_SPAN_Plus_v1.10.rar

    SPAN Plus是免费软件SPAN插件的扩展版本:SPAN Plus提供了几个额外的功能，如PNG文件导出，实时频谱导入/导出跨轨频谱比较，和静态频谱显示。 SPAN Plus为您提供了一个非常灵活的“模式”系统，您可以使用它来设置您...

    程序员表白爱心源码分享

    &lt;span class="keyword"&gt;优秀的男朋友&lt;/span&gt;&lt;br /&gt;&lt;br /&gt; 你也很努力的&lt;br /&gt; 在成为一个&lt;br /&gt; &lt;span class="keyword"&gt;优秀的女朋友的路上&lt;/span&gt;&lt;br /&gt;&lt;br /&gt; 这种感觉&lt;br /&gt; 真的是&lt;br /&gt; &lt;span class=...

    元旦倒计时JavaScript代码

    &lt;span class="day"&gt;0&lt;/span&gt; &lt;span&gt;天&lt;/span&gt; &lt;span class="hour"&gt;1&lt;/span&gt; &lt;span&gt;小时&lt;/span&gt; &lt;span class="minute"&gt;2&lt;/span&gt; &lt;span&gt;分&lt;/span&gt; &lt;span class="second"&gt;3&lt;/span&gt; &lt;span&gt;秒&lt;/span&gt; &lt;/div&gt; &lt;/...

    jQuery仿天猫页面楼层跳转代码.zip

     &lt;li&gt;&lt;i&gt;7F&lt;/i&gt;&lt;span&gt;居家&lt;/span&gt;&lt;/li&gt;  &lt;li&gt;&lt;i&gt;8F&lt;/i&gt;&lt;span&gt;母婴&lt;/span&gt;&lt;/li&gt;  &lt;li&gt;&lt;i&gt;9F&lt;/i&gt;&lt;span&gt;食品&lt;/span&gt;&lt;/li&gt;  &lt;li&gt;&lt;i&gt;10F&lt;/i&gt;&lt;span&gt;图书&lt;/span&gt;&lt;/li&gt;  &lt;li&gt;&lt;i&gt;11F&lt;/i&gt;&lt;span&gt;服务&lt;/span&gt;&lt;/li&gt;

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