ie6下div的width会被padding撑开的解决思路

最新推荐文章于 2022-05-05 15:54:09 发布

alexxiyang

最新推荐文章于 2022-05-05 15:54:09 发布

阅读量1.5k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/nsrainbow/article/details/26449437

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

通过http://stackoverflow.com/questions/1210417/best-way-to-solve-the-padding-css-problem 这篇文章我们知道

可以通过改变docType来让 ie用不同的模型

HTML4 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd" >

XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Your doctype must be the first thing to appear on your page. It is even before the <html> tag, on its own line.

猜测的方法

设置该元素的box-sizing:border-box [不可行，因为ie6不支持这个属性]
反过来用非ie6的浏览器来向下兼容ie6
设置display:inline [采用嵌套div，将内部div设置为inline或许可行]
不设置width，让padding自由撑开以达到预期的width

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

alexxiyang

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ie6下div的width会被padding撑开的解决思路

你可以尝试设置该元素的box-sizing:border-box []
复制链接

扫一扫

专栏目录

IE6下padding的一个影响布局的问题

12-10

问题：在某容器上使用padding-left:15px 同时使用line-height,并且容器宽度使用默认值(100%填满父容器).这时,这个容器就会被撑出父容器,且溢出大小为15px. 解答：要避免这种情况,就要去掉line-height,如果非要用,就一定要指定height的值. 在网页制作时，这种问题有很多，一定要综合考虑，我说的只是其中一种情况，希望可以帮到您！

IE6下div宽高设置

weixin_30673611的博客

04-26

IE6下宽高设置。IE下div 中没有内容时，设置宽高不起作用，必须设置div背景色，并使用滤镜。才能使Div填充目标区域。多用于，其他容器元素使用背景图片，但是背景图片的部分需要其他的事件支持。如跳转。可以使用放置div的方式实现，使 div填充满目标区域，将所需的事件写到div中即可。转载于:https://www.cnblogs.com/wcLT/archive/2013/04/26/30...

参与评论您还未登录，请先登录后发表或查看评论

input的width和padding-left同时存在时IE兼容问题

weixin_30653097的博客

04-08

132

总的来说，text-indent不影响元素的最终宽度但是有兼容性问题，padding-left在中国主流浏览器IE低版本下影响最终宽度，但在chrome和firefox下不影响宽度，但是可以通过CSS reset解决多浏览器显示不一的问题，使得他们最终都影响宽度。 text-indent和padding-left的基本区别： padding-left基于盒模型，适用于inline和bl...

ie6下内容会撑开父级设置好的宽高

weixin_30455365的博客

12-21

在ie6下，内容的宽高会撑开父级设置好的宽高，在其他浏览器下不会。会出现的问题是：如果内容宽度大于父级设置好的宽度，内容的最后一个元素会换行显示。注意：在计算时，务必做到精准，不然可能会产生不必要的麻烦。转载于:https://www.cnblogs.com/eoff/p/5062641.html...

关于IE处理margin和padding值超出父元素高度的问题

weixin_33957648的博客

10-27

217

两个div，父div有padding值，子div有margin-top值，浏览器在解析实际父子位置关系时，他们之间的距离是父padding+子margin-top。现在把父div设置固定高度，并有意让父padding+子margin-top的值大于父div的高度。这时，chrome，firefox,opera中效果都会把子div”挤出“。唯独IE，居然敢擅自增加父div的高度（父div高度...

IE6下兼容性常见的几个问题与解决方法

01-21

常见问题一：在Ie6下，内容会把父元素设置好的宽高撑开。计算一定要精确 .box{width:400px;} .left{width:200px;height:210px;background:red;float:left} .right{width:200px;float:right;overflow:hidden;} .div{...

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法.pdf

热门推荐

一颗程序猿

10-03

1万+

因为Div添加了内边距属性，Div的实际宽度=Div的初始固定值+边距值（高度同理）例如Div设定为宽度为100px，添加5px的上下左右内边距，该Div的最后宽度为100+5+5=110px。 CSS padding 属性定义元素边框与元素内容之间的空白区域。内边距数值设置相同，只需要写成：padding:10px; padding 接受长度值或百分比值，但不允许使用负值所以如果需要给...

盒子的padding不影响总的大小css代码

weixin_33935505的博客

09-24

1101

-moz-box-sizing: border-box; /*Firefox3.5+*/-webkit-box-sizing: border-box; /*Safari3.2+*/-o-box-sizing: border-box; /*Opera9.6*/-ms-box-sizing: border-box; /*IE8*/box-sizing: bor...

解决IE7浏览器下margin或padding失效的问题

sinat_35391165的博客

08-10

2796

首先声明这里讨论的所有问题都是在浮动清除干净后产生的在IE7浏览器下，margin或padding可能会出现失效的问题，尤其是外部两个div的margin-bottom或者padding-bottom margin可能会出现完全失效，padding则可能出现给出值但实际距离缩小的情况这里举两个例子 1.先来看看原本想要的效果但实际在IE7下会出现的效果 1）margin-bo...

CSS3 盒子设置border和padding不撑开盒子

西柚2015地信小白GISer

05-05

6567

普通的盒子模型我们设置border会将盒子撑大 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scal

关于width与padding

Afar的专栏

04-29

1万+

首先谈谈!important问题的引起（盒模型问题）: 在CSS标准中，一个盒模型包括4个区，分别是：内容、内边距（padding）、边框（border）和外边距（margin）。而Width宽度的计算，CSS有它的标准。但是实际上，不同的浏览器的表现却不同。比如， Firefox（FF）是准确按照CSS标准：width为内容的宽度，也就是说：层的宽度 = wid

解决DIV+CSS在IE与Firefox下的兼容性问题

2. Margin加倍问题：在IE6中，设置为浮动（`float`）的div，其margin值会被加倍。通过添加`display: inline;`可以使IE正确理解margin，如`#IamFloat{float:left; margin:5px; display:inline;}`。 3. 浮动元素的...