`
sfh
  • 浏览: 4568 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS笔记之 li元素有点奇怪

阅读更多

昨天做列表的时候偶然发现HTML中li元素有点奇怪:

 

先上代码:

<ul style="border:1px solid #dddddd; width:300px">
	<li style="border:1px solid #999999; list-style:none; padding:0">
		<span style="border:1px solid #333333;font-size:9px;font-weight:bold;padding:0 12px; margin:0">Test</span>
	</li>
</ul>

 

在firefox3.0 chorme ie6 ie7浏览器中效果大致如下:

 


(对于ie浏览器,span与li下边界不会重合)


无论如何改变li的高度,这个span(a元素也测试过,结果一样)与li上边沿都有4px的间隔;

不同的是,对于ie6,li高度不会小于18(这是ie6的老bug了,可以通过改变font-size改变其高度)。

 

 

而唯独ie8中效果是这样:


 

而只有当这个span元素的display属性变成block的时候,其他浏览器的这个4px间距才会消失。

 

那么这样ie8对li的处理到底是标准处理,还是非标准处理呢?不管怎么样,ie8中li又需要特殊处理了

 

  • 大小: 511 Bytes
  • 大小: 464 Bytes
  • 大小: 502 Bytes
分享到:
评论

相关推荐

    html和css笔记

    - **层叠与继承**:CSS的层叠机制决定了样式的优先级,而继承则意味着某些样式可以从父元素传递给子元素。 总之,HTML和CSS是构建网页不可或缺的技术,掌握它们不仅是前端开发的基础,也是理解和创作高质量网页内容...

    史上最经典的HTML+CSS笔记.rar

    此外,还有列表`&lt;ul&gt;`、`&lt;ol&gt;`和`&lt;li&gt;`,表格`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`等,以及用于创建表单的`&lt;form&gt;`、`&lt;input&gt;`等元素。 CSS则是负责网页样式的语言,它可以控制HTML元素的外观,如颜色、字体、大小、位置等。...

    HTML CSS笔记(含HTML5 CSS3 sublime快捷键整理).docx

    ### HTML CSS笔记(含HTML5 CSS3 sublime快捷键整理) #### 概述 本文档针对Web前端新手,全面系统地介绍了HTML、HTML5、CSS、CSS3的基础知识以及Sublime Text编辑器的快捷键操作技巧。文档共计104页,内容丰富...

    html5和css笔记.docx

    "HTML5和CSS笔记" HTML5部分: 了解HTML5 HTML5是最新的HTML标准,于2008年发布。它的主要特点是对多媒体、图形和动画的支持,提高了浏览器的兼容性和可读性。HTML5的出现使得Web开发变得更加简洁、高效和灵活。...

    HTML_CSS学习笔记.docx

    CSS(Cascading Style Sheets)则负责控制网页的呈现样式,包括颜色、字体、布局等视觉效果。 1. HTML 介绍: - HTML 与 CSS 的关系:HTML 提供了网页的基础结构,而 CSS 负责美化这些结构。通过将内容和表现分离...

    HTML+CSS+JS复习笔记

    CSS3是其最新版本,添加了许多新特性,如媒体查询(Media Queries)用于响应式设计,伪类和伪元素增加更精细的样式控制,以及过渡(Transitions)、动画(Animations)和变换(Transforms)增强了视觉效果。...

    css 笔记.docx

    ### CSS基础知识 #### CSS是什么及用途 CSS,全称为Cascading Style Sheets(层叠样式表),是一种用于定义HTML文档外观、布局以及呈现方式的语言。它使得开发者能够将设计元素与网页内容分离,从而实现更加灵活和...

    html、css笔记.zip

    HTML(HyperText Markup Language)和CSS(Cascading Style Sheets)是...在这个过程中,阅读和参考"html、css笔记"这样的资源是非常有益的,它们可以帮助你巩固理论知识,同时提供实际代码示例,加速你的学习进度。

    div css学习笔记

    ### DIV CSS 学习笔记详解 #### 一、文档类型声明 DOCTYPE 在网页开发中,**DOCTYPE**声明是HTML文档的一部分,它告诉浏览器该页面使用的HTML或XHTML的版本和类型。这有助于确保浏览器正确解析和显示页面。在给定...

    HTML标签+CSS笔记

    链接使用`&lt;a&gt;`标签,图像使用`&lt;img&gt;`标签,列表则分为有序列表`&lt;ol&gt;`和无序列表`&lt;ul&gt;`,以及它们的子标签`&lt;li&gt;`。表格由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头)和`&lt;td&gt;`(单元格)组成。此外,还有用于创建段落、...

    前端css+html+布局笔记

    详尽的前端笔记,包含html和css部分,由xmind8做的笔记。css部分:编写的位置 1.内联样式 将样式编写到标签的style属性中 ;"&gt; 这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用...

    韩顺平 html+css+JS完整笔记

    韩顺平的CSS笔记可能包含: 1. 选择器:如类选择器(`.class`),ID选择器(`#id`),元素选择器(`element`),以及伪类和伪元素(`:hover`, `::before`等)。 2. 属性与值:如`color`, `font-size`, `background-...

    零基础HTML+CSS+DIV笔记分享

    ### 零基础HTML+CSS+DIV笔记分享 #### HTML基础知识与规范 1. **标签名和属性名必须小写**:为了保持代码的一致性和兼容性,HTML5规范建议所有的标签名和属性名都使用小写字母。这样做有助于提高代码的可读性和...

    CSS选择器笔记

    **CSS选择器笔记** CSS(层叠样式表)选择器是网页设计中用来选取HTML或XML文档中的元素的工具,从而应用相应的样式规则。选择器的种类多样,可以帮助开发者精确地定位到页面上的任何元素,实现精准的样式控制。...

    web开发-css完整笔记

    这篇“web开发-css完整笔记”涵盖了多个CSS相关的知识点,让我们逐一深入探讨。 1. **CSS背景色与前景色**:背景色可以通过`background-color`属性来设置,而前景色则是通过`color`属性来设定。例如,`background-...

    HTML和CSS的学习笔记

    CSS还可以使用类(`.class-name`)或ID(`#id-name`)选择器来更精确地控制特定元素的样式。 在学习HTML和CSS时,理解盒模型的概念至关重要。盒模型描述了元素如何占据空间,包括内容区域(content)、内边距...

    DIV+CSS学习笔记

    【DIV+CSS学习笔记】 在网页设计中,`DIV+CSS`是一种常用的技术,用于创建布局和控制网页元素的样式。这种技术的核心是利用`&lt;div&gt;`元素作为容器,通过CSS(Cascading Style Sheets)来定义这些容器的样式,从而实现...

    CSS选择器笔记(注释).doc

    【CSS选择器笔记】 CSS(层叠样式表)选择器是用于选取网页中特定元素的工具,它们在定义页面样式时起着至关重要的作用。理解并熟练运用CSS选择器可以帮助我们更加精确地控制网页的布局和表现。下面将对各种CSS选择...

    HTML和CSS笔记.pdf

    有序列表中的每个项目使用&lt;li&gt;标签包裹,可以使用type属性控制编号形式,如数字、大写字母、小写字母、罗马数字等,并可以使用reversed属性实现反向排序,或者用start属性指定起始编号。 10. 图片和超链接: 图片...

Global site tag (gtag.js) - Google Analytics