`
zhouyrt
  • 浏览: 1159160 次
  • 性别: 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中“+”的陷阱
评论
发表评论

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

相关推荐

    鼠标激活显示背景色网页特效CSS代码

    对于IE7及更早版本的兼容性处理，我们可以使用星号（`* html`）选择器，这是一个专为IE6和IE7设计的hack，用于设置`a`元素的宽度，使得在这些浏览器中也能实现背景色的变化。 此外，代码还定义了`a`元素内的`em`和`...

    尚硅谷_前端_面试题

    - `block`：作为块级元素显示。 - `inline`：作为行内元素显示。 - `inline-block`：作为行内块元素显示。 - `none`：隐藏元素。 - `flex`：使用Flexbox布局。 - `grid`：使用Grid布局。 - `table`：作为表格...

    interviewee-web&java

    2. **内边距(Padding)**：位于内容和边框之间，可以设置透明度和背景色。 3. **边框(Border)**：围绕在内边距和内容周围的线或框，可以定义宽度、样式和颜色。 4. **外边距(Margin)**：位于边框之外，是透明的，不...

    HTML最全总结.doc

    对于不支持`&lt;audio&gt;`和`&lt;video&gt;`标签的旧版IE8浏览器，可以使用`&lt;embed&gt;`标签作为替代。 CSS（Cascading Style Sheets）用于控制网页的样式和布局。在CSS中，选择器是用于选取HTML元素的关键工具。例如，类选择器...

    web前端笔试面试

    - 或者使用`:before`伪元素覆盖背景色。 **21. 网页验证码的作用？** - 验证码用于防止机器人的自动化操作。 - 解决安全问题，如防止垃圾邮件。 **22. title与h1的区别、b与strong的区别、i与em的区别？** - **...

    css入门笔记

    背景色 属性：background: 取值：颜色 2.背景图片 属性：background-image：url(); 取值：url() 3.背景图像平铺 属性：background-repeat 取值： 1.repeat 默认值，横向和纵向同时平铺 2..repeat-x ...

    干货前端工程师面试题汇总内含题目解析和详细答案

    - 可以通过设置元素的高度为1px，并调整其背景色来实现。 - 示例代码：`;background-color:black;"&gt;&lt;/div&gt;` #### 17. **网页验证码的作用** - 主要是为了防止自动化程序恶意提交表单，增强网站的安全性。 #### 18...

    css十大绝秘技巧

    在网页设计中，合理的使用背景色和背景图可以使页面更加美观。例如，为导航栏设置背景色： ```css #navigation { background: blue; width: 150px; } ``` 还可以通过背景图片来增强视觉效果： ```css body { ...

    前端大厂最新面试题-css.docx

    53. hasLayout是一种IE的特性，触发hasLayout后会让元素拥有块级格式化上下文。 54. CSS中的类选择器和ID选择器的区别是，类选择器可以应用于多个元素，而ID选择器只能应用于一个元素。 55. 伪元素::before和:...

    web前端面试宝典

    - `rgba()`：用于背景色或其他不希望影响后代元素的情况。 - `opacity`：用于整体透明效果。 ##### 25. 文字垂直和水平重叠 - **垂直**：使用`vertical-align: middle`。 - **水平**：使用`text-align: center`。 ...

    div+css布局中常用方法汇总.docx

    7. **a:hover与th:hover在IE6下的兼容**：`a:hover`在IE6及以下版本中必须包含链接内容才生效；对于表格单元格`th:hover`，需配合JavaScript实现IE6识别。 8. **禁止链接获取焦点**：`onfocus='this.blur()'`可以...

    前端工程师面试题汇总.docx编程资料

    - 如`float`会使元素脱离普通文档流，`position`会影响元素的位置布局等。 28. **BFC规范的理解** - BFC是指一个隔离的独立容器，其中的元素不会影响到容器外面的元素。通过设置`overflow`、`float`等属性可以...

    CSS课程资料.zip

    - 盒模型：理解盒模型是布局的基础，包括content、padding、border和margin四部分，不同的盒模型（如IE盒模型和W3C盒模型）会影响元素的实际尺寸。 2. **浮动**： - `float`属性：CSS中的`float`属性用于创建浮动...

    CSS基础_css_笔记

    3. **浮动布局**：使用`float`属性可以使元素脱离正常流并左右移动，常用于创建多列布局。 4. **定位布局**：使用`position`属性（如`relative`、`absolute`、`fixed`），可以精确控制元素位置。 5. **Flex布局**：...

    DIV+CSS完美布局 .rar

    - 流动布局（Block Layout）：默认情况下，块级元素如`&lt;div&gt;`会占据一整行，行内元素如`&lt;span&gt;`则按顺序在一行内排列。 - 非流动布局（Float Layout）：通过设置`float`属性，元素可以浮动到左侧或右侧，使得后续...

    js+html+css实现鼠标移动div实例.docx

    CSS部分定义了各个`div`的样式，包括边框、背景色、宽度、高度等。`divHead`设置了`cursor: move;`，这样当鼠标位于其上方时，光标会变为移动手柄，提示用户可以拖动。 ```css .divBody { margin-top: 20px; ...

    java面试题（2015）

    - `background-color` 设置背景色。 6. **Div与Table的区别** - **代码量**：div 相比 table 缩减了页面代码量，提高了页面加载速度。 - **可读性和SEO**：div 结构更加清晰，有利于搜索引擎优化（SEO），而 ...

    超级好用的jQuery圆角插件 Corner速成

    但要注意，不同浏览器对某些特定样式的支持情况可能会有所不同，例如在某些版本的Chrome和IE下可能会出现显示问题。为解决此类问题，可能需要对元素的结构或CSS进行调整，比如确保需要添加圆角的元素有一个合适的父...

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