IE和ff 对margin-left 和margin-right的兼容解决办法

最新推荐文章于 2021-06-23 23:27:09 发布

ad123a

最新推荐文章于 2021-06-23 23:27:09 发布

阅读量3.9k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/ad123a/article/details/8840277

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天写了一个header文件，使用margin：0 auto 时，用ff浏览是居中显示，但是使用ie时却不行

网上查的资料其实是没有做DOCTYPE声明加上：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 然后用ie浏览时，能够居中显示。

什么是DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。

其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。

要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ad123a

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

关于margin-top兼容问题

weixin_53278262的博客

12-21

564

关于margin-top兼容(传递)问题,我相信不少小伙伴在日常生活中经常遇到吧,我先举个栗子吧,这样便于大家理解 html代码: <div class="box"> <div class="child"></div> </div> css代码: * { margin: 0; padding: 0; } .box {

margin-top margin-left兼容

fyqcdbdx的专栏

12-30

1018

常出现两种情况（一）margin-top失效先看下面代码： float:left clear:both; margin-top:20px; 两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距 margin-top没有效果。 www.webjx.com<style type="text/css">floa

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

html margin-left 兼容性,margin-top margin-left兼容

weixin_30375113的博客

06-23

307

常出现两种情况(一)margin-top失效先看下面代码：float:leftclear:both; margin-top:20px;两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距 margin-top没有效果。www.webjx.comfloat:leftclear:both; margin-top:20px;[Ctrl+A 全部选择提示：你可先修改部...

margin-left本身不兼容IE6

ldy592的专栏

08-24

1156

margin-left本身不兼容IE6，比如原来是margin-left:20px，经过ie6的解释会变成40px，在IE6双陪问题一直在困扰很多用css+div布局的设计师，不过这问题我一直用一个办法解决，也就是你用的时候，在后面加上"display:inline;"就可以解决，无论在什么浏览器看都没问题。当然，还有另一个办法，例如你要定义margin-left:20px，那么在原来的margi

margin-left属性在IE6浏览器中解释为双倍填充的解决方法

weixin_33973609的博客

09-30

104

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界，只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界的Bug同样会出现在右侧！方法一：在相应margin-left后加上display:inline;.div{ float:left; margin-l...

html div margin left,CSS 布局简明教程－增加 margin 并解决 margin-left 兼容性问题

weixin_33961375的博客

06-15

292

前面分了两列，但列与列之间没有间距，看起来不美观，想有点间距。.mainCol{float:left;display:inline;margin-left:10px;width:600px;background-color:#00f;color:#000;}我们想在 sideCol 与 mainCol 之间增加点间距，可以设置 sideCol 的右边距，也可以设置 mainCol 的左边距，我们这...

IE6/IE7/IE8/Firefox的CSS各种兼容margin问题解决办法

09-25

本文将详细讨论针对IE6、IE7、IE8和Firefox这四个主要浏览器的CSS中关于margin的兼容性问题及解决办法。首先，我们需要了解不同浏览器所使用的渲染引擎，这对于理解为何会出现兼容性问题至关重要。Firefox使用...

DIV多层嵌套margin-top的BUG问题

09-25

/* 解决FF和ie8的margin-top bug */ margin-top: 10px; float: left; } ``` 2. **使用内边距（padding）**：代替`margin-top`，可以使用`padding-top`来调整元素之间的间距。然而，由于Firefox的盒模型问题...

如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器

12-13

margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会...

FireFox浏览器和IE浏览器下CSS兼容问题

01-21

2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会...

css中设置margin-right:50px，其它浏览器统统没问题，但在ie6下样式出现错位

w522301629的博客

04-18

415

ie6下margin会加倍，要在css中加一句 display:inline 还有，如果有一些其他地方不兼容的话，可以使用hack来设置独有的样式 div{ margin:10px;/*FF*/ *margin:15px;/*IE7、IE6*/ _margin:15px;/*IE6*/ }

IE 和 Firefox 下 CSS 中 margin-left IE显示为两倍的解决方法

xiliuhu的专栏

07-19

609

from:http://hi.baidu.com/lndsqzll/blog/item/88fecb1feab554f6e0fe0bd4.html问题描述一个html页test但是左侧却显示缩进了20个px此设置在firefox 和 opera 都是正常的网上查找了原因发现是IE的一个BUG在style里面添加display:inline;问题解决另：当使用

解决IFRAM自动适应高度的问题，也能适应FIREFOX

weixin_30389003的博客

08-06

在IFRAME要包含的页面中引用下面的JS就可以解决问题，我测试过了，没有问题。 Code1<scriptlanguage="javascript"type="text/javascript">functioniframeAutoFit()2{3varex;4try5{6if(window!=parent)7{8vara=parent.document...

让IE也支持margin居中

anxunmu0298的博客

08-25

谨以此篇献给那些和我一样使用 myeclipse 开发，为了在 IE 下居中一直使用 text-align:center 居中的童鞋。废话不多说，解决办法是在 DOCTYPE 中加上"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"，如下一段简单的代码便可在主流浏览器中居中，包括IE6： <!DOCTYPE...

关于margin的IE6的兼容问题。

fuxiaomi2016的博客

10-12

1418

关于margin的IE6的兼容问题。（双倍margin的问题）

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

sinat_35391165的博客

08-10

2830

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

IE6双倍margin间距两大解决方案

04-10

1768

IE6双倍margin间距两大解决方案本文向大家描述一下IE6双倍margin间距解决方法，这里主要从两个方面来向大家介绍，相信本文介绍一定会让你有所收获。你对IE6双倍margin间距解决方法是否比较熟悉，这里和大家简单分享一下，希望通过本文的学习你对此解决方法有深刻的认识。 IE6双倍margin间距解决方法方法1: 假设：一个div代码为当一个css样式同时设置

margin-left:auto;margin-right:auto;不起作用

飞翔的熊blabla

10-15

3579

因为用了 position: absolute;bottom: 0rpx;

解决ie offset问题

friendan的专栏

01-17

6726

在网上找了下ie offset的问题，没发现好的解决方法，既然碰到了，根据实际情况，灵活处理吧，首先得满足需求是吧。。。我的解决方法是设置margin为负数，从而抵消掉offset的值。 function ClearOffset() { //$('#DesignZone tbody').offset({left:-2, top:-2}); //$('#DesignZ

绝对定位 margin-left