IE8 以下版本的浏览器的盒子模型有什么不一样的地方？

理解盒子模型
最新推荐文章于 2025-10-31 16:17:19 发布
原创 最新推荐文章于 2025-10-31 16:17:19 发布 · 2.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#IE8 #浏览器 #盒子模型 #不同

本文详细介绍了网页布局中的盒子模型概念，包括外边距（margin）、边框（border）、内边距（padding）及内容（content）。重点对比了标准盒子模型与IE盒模型之间的区别，对于前端开发者来说，了解这些细节有助于更好地控制页面布局。

盒 子模型：   外边距（margin）    边框（border）      内边距（padding）    内容（content）；


在标准的盒子模型中（ie8 以上的版本中），宽度和高度指的是 content部分；

但是在ie8以下的版本中，宽度和高度具体指  content  +  padding  +  border 三部分；


所以需要注意低版本的ie中盒子模型下的元素的宽高问题；



介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？
liuhao9999的博客
03-23 812
（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分 IE盒模型和W3C标准盒模型的区别： （1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding（2）IE盒模型：属性width，height包含content、border和padding，指的是content+padding+bord.
IE 8以下版本的浏览器中的盒模型有什么不同
wangpachong的博客
11-27 338
标准盒模型和IE盒模型的区别及转换 标准盒模型是w3c 标准的盒模型，其包含： 盒子占用宽度：margin2 + border2 + padding2 + width 实际宽度： border2 + padding2 + width IE盒模型，在IE中content的宽度包括padding和border这两个属性，所以 盒子占用宽度：margin2 + width 实际宽度：width = pa...
理解盒模型——外边距、内边距和边框之间的关系，IE 8以下版本的浏览器中的盒模型有什么不同。...
weixin_34138521的博客
01-06 482
一个元素盒模型的层次从内到外分别为：内边距、边框和外边距IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框 转载于:https://www.cnblogs.com/wangshichuan/p/4205697.html...
介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
LuckXinXin的博客
01-29 213
有两种， IE盒子模型、W3C盒子模型； 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)； 区 别： IE的content部分把 border 和 padding计算了进去; 盒子模型构成：内容(content)、内填充(padding)、 边框(border)、外边距(margin) IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型) 标准(W3C)盒模型：元素宽度 = width + p.
盒子模型（含ie8--怪异盒子模型）
weixin_30896825的博客
12-20 197
盒子模型包括：centent（内容）、border（边框）、padding（内边距）、margin（外边距） HTML: <div>centent</div> CSS: div{ height: 200px; width: 200px; padding: 10px;...
<div+css页面布局课堂笔记>3---页面布局的盒子模型（IE与其他浏览器区别）
Fuego801的博客
03-26 583
1.ie与其他浏览器盒子的宽度和高度是不同的： IE的宽高度包括了边框和内嵌边距，而其他浏览器的宽高度为内嵌文本的宽高度。 2.源代码： .box { width:250px !important;  其他浏览器宽高度 width:300px; IE为后边的宽高度，会覆盖前边的宽高度。 height:270px !important; height:300px; bor
前端基础(八)_盒子模型（标准盒子模型和怪异盒子模型）
见贤思齐焉，见不贤内自省
12-15 4139
盒子模型（标准盒子模型和怪异盒子模型）
CSS3盒子模型详解
09-25
Inline-block元素结合了两者特性，既能像Block元素那样设置宽高，又能像Inline元素一样并排显示，但它在IE8及以下版本不受支持。 2. `display`属性 `display`属性用于定义元素的盒类型。例如，`display: block`使...
前端面试题-(浏览器内核，CSS选择器优先级，盒子模型，CSS硬件加速，CSS扩展）
qq_44428688的博客
01-23 1680
层爆炸，由于某些原因肯呢个导致大量不在预期内的合成层，虽然哟浏览器的层压缩机制，但是也有跟多无法进行压缩的情况。简单直接的方式：食堂3D硬件家岁提升动画性能时候，最后给元素增加一饿z-index属性，人为干扰合成层的顺序，可以有效的减少创建不必要的合成层，提升渲染性能。双飞翼布局：为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置（放大浏览器不会变形）他俩的区别就是一个往外撑一个往里挤的区别吧。
IE和谷歌浏览器下div宽度不一致的问题解决.txt
11-28
在实际项目中，开发者可能会发现某些布局在Chrome等现代浏览器上显示正常，但在IE浏览器（特别是IE8及以下版本）中会出现宽度不一致的现象。这种现象通常是由于不同浏览器对CSS规则的解释存在细微差别所导致的。 ##...
9、CSS 盒子模型：全面指南
最新发布
rnn9storyteller的博客
10-31 17
本文全面介绍了CSS盒子模型的核心概念与实际应用，涵盖盒子尺寸控制、边框、外边距、内边距的设置方法，以及display与visibility在元素显示隐藏中的区别。深入讲解了CSS3新增特性如border-radius圆角、box-shadow投影和border-image边框图像的应用技巧，并通过音乐商店主页示例展示综合布局。同时提供了盒子居中、旧浏览器兼容性处理等实用技巧，帮助开发者掌握创建响应式、美观网页布局的关键技能。
IE盒子模型和标准W3C盒子模型
09-27
网页制作Webjx文章简介：盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。 盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实
[css] 说说你对低版本IE的盒子模型的理解
歌谣的博客
02-20 573
[css] 说说你对低版本IE的盒子模型的理解 一个CSS盒子由四部分组成，由内到外依次是：content、padding、border、margin。 所谓盒子模型定义的是盒子宽高的计算方法，IE盒子模型的宽高为content、padding、border之和。而W3C盒子的宽高仅为content。从页面布局来说前者实际上更实用一点，这也是后来W3C提供box-sizing属性用于切换盒子模型的原因。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论
盒子模型（标准盒子模型和IE盒子模型）
weixin_43565079的博客
09-17 258
最常遇到的就是box-sizing：content-box和border-box的区别 content-box，即标准盒子模型，这个情况下设置的width不包括padding、border、margin。 border-box，即IE盒子模型，这个情况下设置的width不包括margin，包括padding、border。 ...
标准盒子模型和IE盒子模型
ly的博客
09-20 724
标准盒子模型=margin +border +padding +content(content=width|height) IE盒子模型 = margin+content(content=border+padding+width|height) 举例说明:一个盒子模型如下：margin:20px,border:10px,padding:10px;width:20
IE-什么是盒模型？
m0_56232007的博客
06-10 2946
IE盒模型 IE盒模型又叫怪异盒模型。在IE8以上以及其他的浏览器中使用的盒模型都是标准盒模型，但是IE低版本使用的是IE盒模型。 IE盒模型与标准盒模型的区别 IE盒模型设置的宽为：整个盒子所占有的宽度。（内容的宽+左右padding+左右border） 标准盒模型设置的宽：内容区域的宽。 设置IE盒模型的方法 box-sizing: border-box； ...
介绍一下标准的css盒子模型？低版本的IE的盒子模型有什么不同的？
weixin_42632642的博客
10-29 379
1、有两种盒子模型：IE盒子模型（border-box）和W3C标准盒模型（content-box）。 盒模型组成：内容（content）、填充（padding），边框（border），边界（margin）四个部分。 IE盒模型和W3盒模型的区别： （1）IE盒模型的width包含：content+border+padding （2）W3C盒模型的width只包含：content 在ie8+已上的浏览器的浏览器默认是标准盒模型，可以通过css3 的新特性box-sizing改变其属性。 如果在i
标准的盒子模型，与低版本IE的盒子模型有什么区别
zhzijun的博客
09-09 498
（1）有两种， IE 盒子模型、W3C 盒子模型； （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框 (border)； （3）区 别： 标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样 标准的css盒子模型宽高就是内容区宽高； 低端IE的content部分把 border 和 padding计算了进去; ...
CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型
weixin_30537391的博客
09-19 138
CSS中盒子模型的组成由内容区（content）、内边距（padding）、边框（border）、外边距（margin）组成。内边距可细分为 padding-top、padding-right、padding-bottom、padding-left；边框可细分为 border-top、border-right、border-bottom、border-left；外边距可细分为 margin-top...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值