IE中margin:auto失效问题

最新推荐文章于 2024-10-25 21:30:02 发布
原创 最新推荐文章于 2024-10-25 21:30:02 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ie #html #浏览器 #工作

本文记录了一次解决网页布局中margin:auto在IE浏览器中失效的问题。原因是缺少DOCTYPE声明，导致IE无法正确解析CSS属性。通过添加标准的HTML DOCTYPE声明解决了此问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

    写个网页诡异了，margin:auto在非IE内核的浏览器（例如火狐）中工作正常，在IE中却失效了。原因是不小心把下面一句给删掉了

 

    耗了相当多时间才解决这个问题啊，留个笔记

绝对定位+margin auto垂直居中引发的思考
qq_38164763的博客
06-10 1132
占
CSS中的margin：auto失效原因
热门推荐
zym_zb的博客
02-18 1万+
1.要给居中的元素一个宽度，否者无效。 2.该元素一定不能浮动，否者无效。 3 在HTML中使用标签，需考虑好整体构架，否者全部元素都会居中的。 4.display：table－cell display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。 目前IE8+以及其他现代浏览器都是支持此属性的。我们都知道，单元格有一些比较特别的属
css笔记-margin: 0 auto失效的情况
xueguliang的博客
05-20 1055
margin: 0 auto只能用于设置了宽度的块级元素 以下情况会失效 块级元素没有设置高宽 ， li { border: 1px dashed #ccc; margin: 0 auto; } 解决 li { width: 210px; height: 60px; border: 1px dashed #ccc; margin: 0 auto; } 应用于加了浮动的块级元素 ，因为浮动脱离了标准流，是不能生效的 li { width: 210px; h
解决设置margin: 0 auto 失效的问题
xiaoshengbuzao的博客
12-02 2530
一、判断是否有设置盒子的宽高 weight height 二、判断是否设置了绝对定位 position:absolute 设置了绝对定位会脱离标准文档流（网页默认的文档格式），设置的margon:auto是针对文档流的元素，自然失效 别用absolute 三、判断是否使用浮动 float的设置也会脱离文档流 清浮动，用div包裹 四、判断行内元素是否失效 需要设置成displ...
设置了position后为什么margin:auto没用
L2395183536的博客
12-28 2045
设置了position后为什么margin:auto没用 原因：因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。所以margin这个时候不会骑作用滴，需要用left， right, bottom,top来进行精确定位了 ...
在IE下，当margin:0 auto;无法使得块级元素水平居中时
11-30
本文将深入探讨在Internet Explorer（IE）浏览器中，为何`margin: 0 auto;`在某些情况下无法使块级元素水平居中，并提供解决方案。 首先，`margin: 0 auto;`这个CSS声明通常用于使具有固定宽度的块级元素在容器内...
div使用margin:0px auto不居中的原因分析及解决
09-25
解决这个问题的一种方法是在`<body>` 标签内设置`text-align: center`，这会使整个页面内容居中，然后通过设置子元素的`margin: 0 auto` 来使其在父元素中居中。 另一种解决方案是添加文档类型声明（DOCTYPE），如`...
IE6,IE7浏览器下 margin 无效的解决方法
12-10
其中，一个常见的问题是`margin`在这些老版本的IE浏览器下可能会失效，导致布局出现异常。这个问题主要出现在那些没有开启`haslayout`特性的元素上。 `haslayout`是Internet Explorer特有的渲染模式，它决定了一个...
Margin: auto；失效原因
weixin_45244385的博客
09-17 572
原因1、块级元素没有给定宽度
margin：0 auto无效原因
weixin_44501490的博客
03-09 4721
1、没有给要居中的元素设置宽度 2、该元素position值为absolute 3、该元素设置了浮动属性 几点说明： 对于有上下边偏移的相对定位的盒子，margin auto是有效的。 对于有左右边偏移的相对定位的盒子，margin auto也是有效的，只是在居中的基础上会偏差一个left或right值。当left或right为0时，水平居中。 当div宽高都设置了百分比，又设置margin：0...
【css】margin：auot什么情况下失效
Triumph_light的博客
09-09 732
上面说了在正常的文档流当中w3c默认规定margin-top和margin-right为0，所以实现不了垂直居中，只有绝对定位的元素才可以，意思就是绝对定位之后如果设置了margin：auto,那么margin-top和margin-right不再为0,而是auto，同时需要设置top,bottom,left,right为0来找到父元素的位置，然后margin：auto会找到父元素的位置开始自动计算，并分配好上下左右外边距，从而实现水平垂直居中！
margin：auto不生效的几种情况
最新发布
m0_74065758的博客
10-25 638
当一个元素使用绝对定位时，margin：auto同样无法起作用。绝对定位的元素会脱离正常的文档流，其宽度会根据内容自动调整，而经受不起margin属性的限制，绝对定位会忽略margin属性。当一个元素没有指定宽度时，margin：auto无法生效。因为在没有指定宽度的情况下，元素的宽度将默认100%，此时无法进行居中对齐。当一个元素使用浮动时，margin：auto无法生效。浮动元素会脱离文档流，并且会根据自身尺寸进行对齐，而不受margin的控制。我们此时给元素添加一个固定的宽度就可以解决这个问题了。
margin:0 auto 不起作用的原因
qq_23159841的博客
11-24 3167
https://blog.youkuaiyun.com/qq_43719932/article/details/90574700 块级元素的定位是绝对定位，即position:absolute。 因为margin可以理解为，规定该元素与其他元素的距离。那么就说明该元素应在文档流之中，这样才能计算auto。 块级元素应该没有给定的宽度。如width:10px 或是width:10%等 img标签 margin:0 auto失效 ...
margin: auto在什么时候会失效
ixxoic的博客
09-19 427
margin: auto失效原因
margin auto不对行内/行内块有效的原因
m0_52711377的博客
10-18 472
除此之外，绝对定位元素如果在对立方向设置了相同数值，也会产生流体特性。inline-block：没有流体性，因为元素会改为收缩性（shrink），收缩到他可以收缩的最小宽度。流体特性：元素可以自适应它所处包含块的尺寸。比如常见的块级元素，默认是占满整个包含块的水平宽度。margin：auto只对有流体特性的元素生效。
DIV和CSS居中
“夜光寒”的博客
05-28 647
　　在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果，这是在页面布局中基本，也是最应该首先掌握的知识。不过，还是经常会有人问到这个问题，在这里我简单总结一下使用Div和CSS实现页面水平居中的方法：　　一、margin:auto 0 与 text-aligh:center　　在现代浏览器（如Internet Explorer 7、Fire
margin:0 auto没效果是什么原因
qq_44176252的博客
03-03 7962
首先进行了一个html的布局，一个div标签分别包含行内标签和块级标签，我想在居中的元素里再使用margin：0 auto居中。 第二步给div,p,span三个属性进行添加css样式，同样是添加了margin：0 auto，但只有div居中 效果如下： 第三步：问题所在，后来发现， 1.如果当前元素没有设置宽高属性的情况下，margin:0 auto是不起任何效果的； 2.如果当前元素使用百分比设置宽高，margin:0 auto同样不起效果 3.如果是行内元素，需要先转化为块级元素，注行内块不行，
为什么用margin：0 auto无效？
webdowhatIlike的博客
11-21 2139
1.给父元素设置这类margin 需要子元素是块级元素 displayinline/flex/inlineblock都不行 2.子元素如果是块元素 则可能是没有设置宽度 块级元素默认宽度是屏幕宽度 所以没有宽度会导致无效 ps：当不知道盒子的问题出在哪里时 考虑给他➕border 便于观察和调整
解决HTML嵌套div中margin失效问题及IE特性解释
它在CSS中非常重要，但当遇到元素嵌套且父元素设置了`padding`时，`margin`的行为可能会受到影响，特别是在非标准布局模式下，如IE的`hasLayout`模式。 解决此类问题的方法主要有两种： 1. **创建块级格式化上下文...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值