盒子模型(BOX Model) 在IE和Firefox中的区别

刚接触用Div布局时,许多人都只针对IE开发。但随着其他标准浏览器在市场中出现的比重越来越大、人们对于标准越来越重视,目前针对W3C进行开发、对IE系列进行兼容已经成为主流。

Div标签,作为标准化Web应用来说,已经成为最重要一个名词。甚至在网络上经常出现“DIV+CSS”这类词语来表示标准化Web开发。

曾经在给一个老网站做兼容Firefox时出现一个问题,现在看来这完全不是问题,但在当时着实费了一番脑筋。

当时在将页面中凌乱不堪的结构重新布局时发现,有些Div在Firefox中会多出2px,有些则没有。

太令人费解了,同一个页面,对Div居然有2种解释?

但在观察后发现,所有大了2px的Div都有边框,就是这个边框使得Div大了2px。

一番google后,终于明白其中的道理。

IE和W3C分别有一套盒子模型,Firefox中采用W3C标准模型,而IE中则采用Microsoft自己的标准,

看下面2个示例图:

很明显,W3C标准认为,盒子的宽度仅仅是内容的宽度,而IE标准认为“内容+padding+border”才是盒子的宽度,

所以在我设定了border的Div中,才会出现在Firefox大了2px(左右各1px的border)

我们可以将用CSS
Hack 来区分2个标准:

div_hasborder {width:98px;width:100px !important;
border:1px solid #000000;}

另外,如果在定义HTML使用了<!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”>
那么就不会有这个问题,所有的Box模型都将使用W3C标准,不管是在IE中还是其他浏览器中。

时间: 2024-11-13 21:38:06

盒子模型(BOX Model) 在IE和Firefox中的区别的相关文章

盒子模型(Box Model)

盒子模型(Box Model) ■ 盒子模型--概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属性. 细节说明: ?html 元素都可以看成一个盒子 ?盒子模型的参照物不一样,则使用的 css 属性不一样.比如:从 div1 的角度看,是 margin-right,从 div2 看,则是 margin-left. ?如果你不希望破坏外观,则尽量使用 margin 布局,因为 padding 可

CSS 框模型(Box Model)

CSS 框模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 下面的图片说明了框模型(Box Model): 不同部分的说明: Margin - 清除边框区域.Margin没有背景颜色,它是完全透明 Border - 边框周围的填充和内容.边框是受到盒子的背景颜

css盒模型 Box Model

属性:内容(content).内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. 盒子的分类:不同的元素产生的盒子类型可能不同, 一个元素,产生什么样的盒子,取决于它CSS的display属性 display:none:不生成盒子 display:inline:行盒 display:block:块盒 盒子组成: Margin(外边距) - 清除边框外的区域,外边距是透明

盒模型Box Model(浮动)

一.标准盒模型的大小:border+padding+content(width) 怪异盒模型大小:padding+border 二.display inline  默认,且变为行由内容撑开 block  变为块元素,前后会自带有换行符 none  不会显示元素(只是隐藏掉,但还在布局中) inline-block  不设置宽度,有内容撑开:行标签会实现宽高到校:块标签已不是独占一行 table  以表格的表现显示 三.float(浮动)用来在一定宽度中实现一行输出多个块 除非添加margin,否

CSS Box Model(盒子模型)

CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 下面的图片说明了盒子模型(Box Model): 不同部分的说明: Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框.

CSS盒子模型+如何使用CSS实现三角形

盒子模型 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容. 盒子中的区域 一个盒子中主要的属性就5个:width.height.padding.border.margin.如下: width和height:内容的宽度.高度(不是盒子的宽度.高度). padding:内边距. border:边框. margin:外边距. 盒子模型的示意图: 代

详细认识一下CSS盒子模型

定义 CSS把每个元素看成是一个个单独的框,这里就叫它"元素框"吧.而CSS 盒子模型 (Box Model) 可以理解成一种规范,它规定了元素框处理其"最里边的内容区域(例如文本,图像等)"."内容周围填充的区域"."边框" 和"边界区域"的方式. PS: 为了方便区分概念,通常也会把"填充"叫做"内边距",把"边界"叫做"外边距&qu

HTML文档与盒子模型

关于HTML 百度百科里是这么说的:超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言. 为什么叫用于"描述"网页文档的"标记"语言呢? 简单地说,它不像Java,C++等程式语言,而是通过标记(也称标签)来表示一个网页的结构与内容,它的语法非常简单,只是由各种不同的标记组合而成,因此这类语言的学习方式主要靠积累,而非程式语言般靠理解来学习. HTML的构成HTML文件的结构通常由以下几个部分构成: 文

从条纹边框的实现谈盒子模型

类似下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签为 div: 1 <div></div> 定义如下通用 CSS: 1 2 3 4 5 div{     position:relative;     width: 180px;     height: 180px; } 这一题主要考查的是盒子模型 Box Model 与 背景 background 的关系,以及使用 background-clip 改变背景的填充方式. background 在 Box Mod