`
caiceclb
  • 浏览: 242386 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

发现IE6、IE7下列表li中内联块级元素的错位bug

XHTMLCSSHTML 
阅读更多

此篇记录发出前，记忆中没有看过相关bug的描述。

 

开发中遇到，对此问题做了简单的代码还原：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="author" content="tofishes@163.com" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
	ul { padding:0;margin:0; }
	li { padding:2px 0; }
	li li { padding:0; }
	a { display:inline-block; }
  </style>
 </head>

 <body>
	<ul class="row">
		<li>
			<ul>
				<li>了款到即发</li>
				<li>拉拉拉拉</li>
				<li>拉拉拉拉</li>
			</ul>
		</li>
		<li>正常的无display:inline-block;的情况<a href="">这个链接是display:inline-block;</a></li>
	</ul>	
 </body>
</html>

 

在ie6/7下 效果如下：

 

错位示意图

 

  

<li>
			<ul>
				<li>了款到即发</li>
				<li>拉拉拉拉</li>
				<li>拉拉拉拉</li>
			</ul>
		</li>

 

这行代码是关键，将ul换成div则不会错位，只有这个ul存在就会错位。

 

解决方法就是设置这个ul为display:inline; 或 inline-block;

 

  • 大小: 4.4 KB
分享到：
| 参考资料写了一个生成缩略图的类
评论
发表评论

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

相关推荐

    CSS文档流与块级元素(block)、内联元素(inline)

    ### CSS文档流与块级元素（block）、内联元素（inline）详解 #### 一、文档流的概念 在深入探讨块级元素与内联元素之前，我们首先要理解**文档流**的基本概念。文档流是指HTML文档中元素按照一定规则排列的方式。在...

    html中的行内元素和块级元素有哪些.pdf

    HTML中的行内元素和块级元素 在 HTML 中，元素可以分为两大类：行内元素（inline element）和块级元素（block element）。这两种元素在布局和样式上有着很大的不同。 行内元素（inline element） 行内元素是指在...

    CSS文档流与块级元素,css

    ### CSS文档流与块级元素、内联元素详解 #### 文档流的概念 在CSS布局中，**文档流**是一个核心概念，它指的是HTML文档中元素的自然流动方式。想象一下，网页就像一条河流，其中的元素就像河中的船只，顺流而下，...

    标签 li 是不是块级元素分析

    在IE6和IE7中，`&lt;li&gt;`元素默认的`display`值为`block`，这使其表现出典型的块级元素特征。而在其他A-Grade浏览器（如IE8+，Webkit（Safari和Chrome），Firefox，Opera）中，`&lt;li&gt;`元素的默认`display`值是`list-item...

    html 内联元素和html 块级元素概述及区别

    HTML中的元素分为两种主要类型：块级元素和内联元素，它们在网页布局中扮演着至关重要的角色。理解这两种元素的区别对于创建有效的网页结构至关重要。 **块级元素（Block Elements）**： 1. **特性**：块级元素总是...

    html内联元素和块级元素的基本概念及使用示例

    块级元素：一般是其它元素的容器，可容纳内联元素和其它块级元素，块级元素排斥其它元素与其位于同一行，可设置宽度(width)高度(height)属性，正常流中的块级元素会垂直摆放。常见块状元素为“div” 内联元素（行内...

    CSS文档流与块级元素(block)内联元素(inline)那点事

    CSS文档流与块级元素(block)内联元素(inline)那点事

    html-内联元素和html-块级元素概述及区别.doc

    html-内联元素和html-块级元素概述及区别.doc

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

    Inline element 内联元素通俗点来说就是文本的显示方式，与块级元素相反，内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的、、都属于内联元素。内联元素的显示特点就是像文

    块级元素和内联元素及可变元素汇总

    在实际开发中，开发者经常通过CSS来调整元素的显示方式，比如将内联元素转换为块级元素，或者让块级元素在一行内显示，以此来实现复杂的布局设计。同时，可变元素的存在为开发者提供了更多的灵活性，可以根据需要...

    浅谈CSS块级元素与行内元素(内联元素)的区别和联系

    在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？ 其实，这两种元素都是html规范中的概念。块元素(block element)一般是其他元素的容器元素...

    CSS中如何把Span标签设置为固定宽度.docx

    在CSS（层叠样式表）中，`&lt;span&gt;`标签通常被用作内联元素，用于包裹文本或小块内容，以便应用特定的样式。然而，由于`&lt;span&gt;`是内联元素，它默认不能设置固定的宽度，因为它会根据其内容的宽度自动调整大小。在某些...

    【CSS基础学习】行内元素，块级元素，行内块级元素

    文章目录元素的显示方式和转换块级元素行级元素行内块级元素显示方式之间的转化 元素的显示方式和转换 块级元素 块级元素（inline）： 块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以设置 ...

    详解HTML常用的标签中行内元素和块级元素

    块级元素可以包含行内元素和其他块级元素，比如常用的、、到、、、&lt;li&gt;、、等都是典型的块级元素。块级元素默认宽度为100%，除非通过CSS进行宽度控制。 行内元素（inline element），也称为内联元素，特点是它们...

    CSS完美兼容IE6_IE7_FF的通用方法

    - **块级元素转换**: 如果需要将一个内联元素转换为块级元素，可以使用`display: block;`。 - **浮动元素间距问题**: 浮动元素之间的间距在不同浏览器中表现不一致，可以通过调整`margin`来修正。 **3\. 列表项默认...

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