昨天做列表的时候偶然发现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
分享到:
相关推荐
- **层叠与继承**:CSS的层叠机制决定了样式的优先级,而继承则意味着某些样式可以从父元素传递给子元素。 总之,HTML和CSS是构建网页不可或缺的技术,掌握它们不仅是前端开发的基础,也是理解和创作高质量网页内容...
此外,还有列表`<ul>`、`<ol>`和`<li>`,表格`<table>`、`<tr>`、`<td>`等,以及用于创建表单的`<form>`、`<input>`等元素。 CSS则是负责网页样式的语言,它可以控制HTML元素的外观,如颜色、字体、大小、位置等。...
### HTML CSS笔记(含HTML5 CSS3 sublime快捷键整理) #### 概述 本文档针对Web前端新手,全面系统地介绍了HTML、HTML5、CSS、CSS3的基础知识以及Sublime Text编辑器的快捷键操作技巧。文档共计104页,内容丰富...
"HTML5和CSS笔记" HTML5部分: 了解HTML5 HTML5是最新的HTML标准,于2008年发布。它的主要特点是对多媒体、图形和动画的支持,提高了浏览器的兼容性和可读性。HTML5的出现使得Web开发变得更加简洁、高效和灵活。...
CSS(Cascading Style Sheets)则负责控制网页的呈现样式,包括颜色、字体、布局等视觉效果。 1. HTML 介绍: - HTML 与 CSS 的关系:HTML 提供了网页的基础结构,而 CSS 负责美化这些结构。通过将内容和表现分离...
CSS3是其最新版本,添加了许多新特性,如媒体查询(Media Queries)用于响应式设计,伪类和伪元素增加更精细的样式控制,以及过渡(Transitions)、动画(Animations)和变换(Transforms)增强了视觉效果。...
### CSS基础知识 #### CSS是什么及用途 CSS,全称为Cascading Style Sheets(层叠样式表),是一种用于定义HTML文档外观、布局以及呈现方式的语言。它使得开发者能够将设计元素与网页内容分离,从而实现更加灵活和...
HTML(HyperText Markup Language)和CSS(Cascading Style Sheets)是...在这个过程中,阅读和参考"html、css笔记"这样的资源是非常有益的,它们可以帮助你巩固理论知识,同时提供实际代码示例,加速你的学习进度。
### DIV CSS 学习笔记详解 #### 一、文档类型声明 DOCTYPE 在网页开发中,**DOCTYPE**声明是HTML文档的一部分,它告诉浏览器该页面使用的HTML或XHTML的版本和类型。这有助于确保浏览器正确解析和显示页面。在给定...
链接使用`<a>`标签,图像使用`<img>`标签,列表则分为有序列表`<ol>`和无序列表`<ul>`,以及它们的子标签`<li>`。表格由`<table>`、`<tr>`(行)、`<th>`(表头)和`<td>`(单元格)组成。此外,还有用于创建段落、...
详尽的前端笔记,包含html和css部分,由xmind8做的笔记。css部分:编写的位置 1.内联样式 将样式编写到标签的style属性中 ;"> 这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用...
韩顺平的CSS笔记可能包含: 1. 选择器:如类选择器(`.class`),ID选择器(`#id`),元素选择器(`element`),以及伪类和伪元素(`:hover`, `::before`等)。 2. 属性与值:如`color`, `font-size`, `background-...
### 零基础HTML+CSS+DIV笔记分享 #### HTML基础知识与规范 1. **标签名和属性名必须小写**:为了保持代码的一致性和兼容性,HTML5规范建议所有的标签名和属性名都使用小写字母。这样做有助于提高代码的可读性和...
**CSS选择器笔记** CSS(层叠样式表)选择器是网页设计中用来选取HTML或XML文档中的元素的工具,从而应用相应的样式规则。选择器的种类多样,可以帮助开发者精确地定位到页面上的任何元素,实现精准的样式控制。...
这篇“web开发-css完整笔记”涵盖了多个CSS相关的知识点,让我们逐一深入探讨。 1. **CSS背景色与前景色**:背景色可以通过`background-color`属性来设置,而前景色则是通过`color`属性来设定。例如,`background-...
CSS还可以使用类(`.class-name`)或ID(`#id-name`)选择器来更精确地控制特定元素的样式。 在学习HTML和CSS时,理解盒模型的概念至关重要。盒模型描述了元素如何占据空间,包括内容区域(content)、内边距...
【DIV+CSS学习笔记】 在网页设计中,`DIV+CSS`是一种常用的技术,用于创建布局和控制网页元素的样式。这种技术的核心是利用`<div>`元素作为容器,通过CSS(Cascading Style Sheets)来定义这些容器的样式,从而实现...
【CSS选择器笔记】 CSS(层叠样式表)选择器是用于选取网页中特定元素的工具,它们在定义页面样式时起着至关重要的作用。理解并熟练运用CSS选择器可以帮助我们更加精确地控制网页的布局和表现。下面将对各种CSS选择...
有序列表中的每个项目使用<li>标签包裹,可以使用type属性控制编号形式,如数字、大写字母、小写字母、罗马数字等,并可以使用reversed属性实现反向排序,或者用start属性指定起始编号。 10. 图片和超链接: 图片...