IE7忽略绝对定位div后的div中的边距 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

OL2中重置地图DIV大小后地图的联动

概述：在最近的工作中遇到了这样一个问题：地图全屏后在地图上绘制，发现鼠标的位置和绘制点的位置发生了偏移，因此，花了半天的时间去解决这个BUG，所以在此标记一下。...解决办法：解决后发现其实很简单，就是将地图重新渲染一下即可，即：map.render(mapDiv)。测试示例： <!...100%"); map1.render("map1"); }) }); div...id="map1">div> div style="position: absolute;top: 15px;right: 15px; z-index: 999;border: 1px...solid #ccc; background: #fff;"> 全屏显示 div> </html

1.1K3 0

网页布局基础

要知道，完全大小的元素，你还必须添加填充（padding），边框（border）和边距。....并不是所有的IE都使用IE盒模型：早期IE6、IE7使用“IE盒模型”，后来更新了一次，更新后的IE6、IE7使用标准盒模型IE8及以上版本使用标准盒模型....aotu 会根据浏览器的宽度自动的设置两边的外边距。...不过，设置行高可以增加这个框的高度。 10.绝对定位布局绝对定位布局就是使用position属性实现的网页布局，是CSS中规定的第三种定位机制。...3.当元素设置为绝对定位后，元素也会多出两类属性：偏移量属性和 Z-index属性，与相对定位不同的是：该元素已经脱离了标准文档流（不占位）建立的定位基准不是该元素的原来位置，而是分两种情况

1.9K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

知识整理之CSS篇

没有定位，遵循常规流（忽略 top, bottom, left, right 或者 z-index 声明）。 positoon: relative 相对定位，相对于其正常位置进行定位，遵循常规流。...并且设置top，right，bottom，left这4个属性进行偏移时，不会影响常规流中的任何元素。 position: absolute 绝对定位，脱离常规流。...此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。解决方法: 使用link标签将样式表放在文档head中什么是外边距重叠？重叠的结果是什么？...这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距。更详细介绍可移步至：CSS 框模型( Box module ) 折叠后margin的计算 1....示意图： image.png 外边距重叠的意义外边距的重叠只产生在普通流文档的垂直外边距之间，避免块级元素之间产生双倍边距的问题。外边距重叠解决方案 1.

1.6K2 0

clearfix改良及overflow:hidden详解

（例如弹出窗口），尽管这样做我们还需要处理由clearfix造成的边距折叠bug（译者注：指clearfix的盒子内部元素的垂直边距被扩展到盒子之外）。...该页面中最开始的两个盒模型的边距叠加行为（底边距保留在盒子内部，顶边距则到了盒子外部）说明：生成的内容将盒子内部元素的边距保留保留在了盒子内部，而在其它浏览器下边距将被扩展到盒子边缘之外。...，符合w3c关于垂直边距叠加的说明。...overflow 在众多关于清除浮动的讨论中，出现了overflow:hidden的方法，并且这种方法总是被“如果你把绝对定位元素置于div内部，这些元素（超出的部分）将会被隐藏”的观点击败。...也就是说，如果这个绝对定位元素的包含块的层级高于拥有overflow:hidden样式的盒子，那么这个盒子里面的绝对定位元素不会被截断或隐藏。

1.3K8 0

css多浏览常见问题

,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素); #box{..."; display: block; height: 0; clear: both; visibility: hidden;} 8 DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位...后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !...div>div> 如果想定位到距左30点，距上5点，可以这样： #navigation { position: absolute; left: 30px; top: 5px } 当然，你还可以这样...当然，有时候定位的方法而不是边距的方法更好些。 10、直通到屏幕底部的背景色在垂直方向是进行控制是CSS所不能的。

1.1K3 0

【CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 )

一、绝对定位 ---- 绝对定位是以父级元素为基准 , 设置边偏移 ; 为子元素添加绝对定位 , 如果父容器有定位 , 则相对于父容器的坐标进行定位 ; 如果父容器没有定位 , 则相对于浏览器左上角位置进行定位...; 再次引申 , 如果父容器没有定位 , 则查找父容器的父容器是否有定位 , 如果有则相对于爷爷容器进行定位 ; 上述父容器的定位不一定是绝对定位 , 其它类型的定位也可以 , 在本博客的示例中..., 使用的就是相对定位 ; 为父容器添加了相对定位 , 子容器也会相对于父容器进行定位 ; 二、标准流下的父容器与子元素关系 ---- 1、标准流下父容器与子容器代码标准流父容器中包含一个...class="father"> div class="son">div> div> 展示效果 : 2、移动父容器后的效果移动标准流父容器盒子 ,...; 2、父容器有定位的情况下为子容器添加定位在上面代码的基础上 , 为父容器添加 relative 相对定位 , 不设置边偏移 , 也就是位置相对于标准流的原始位置偏移 0 位置 , 不移动位置

9022 0

第140天：前端开发中浏览器兼容性问题总结（一）

[endif]--> html5shiv.js下载地址 https://github.com/aFarkas/html5shiv/releases 2.ul标签内外边距问题 ul标签在IE6\IE7...中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。...[endif]--> 2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍解决办法：display:block; 3.IE6下图片的下方有空隙...a标签上的状态； ":active": a标签被鼠标按着时的状态； 8.在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0，...ie8 div:hover: >=ie7 inline-block: >=ie8 background-size: >=ie9 圆角: >= ie9 阴影: >= ie9 动画/渐变: >= ie10

3.1K3 1

Web程序员们，你准备好迎接HTML5了吗？

block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block...它实际上通过Javascript的判断来实现最小宽度。 6.DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. ...解决的办法是给FLASH设置透明 19.怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值的方法...; //这个是错误的width，所有浏览器都读到了 voice-family: “\”}\””; //IE5.X/win忽略了”\”}\””后的内容 voice-family:inherit; width...FORM标签这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式

7932 0

网页设计中另人头疼的浏览器兼容问题

block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block...它实际上通过Javascript的判断来实现最小宽度。 6.DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. ...解决的办法是给FLASH设置透明 19.怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值的方法...; //这个是错误的width，所有浏览器都读到了 voice-family: “\”}\””; //IE5.X/win忽略了”\”}\””后的内容 voice-family:inherit; width...FORM标签这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式

1.4K2 0

HTML+CSS高级

注：绝对定位子级的浮动可以不用清浮动方法即clearfix 1.2.4 偏移量是相对于定位父级的，如果没有定位父级，则相对于document ...注：固定定位子级的浮动可以不用清浮动方法即clearfix 1.3.4 偏移量是相对于document 绝对定位的区别> ...解决办法：避免父级宽度出现奇数 1.11 IE6下绝对定位元素和浮动元素并列时，绝对定位元素消失解决办法：让两元素不处于同级 ...注：绝对定位子级的浮动可以不用清浮动方法即clearfix 1.2.4 偏移量是相对于定位父级的，如果没有定位父级，则相对于document ...注：固定定位子级的浮动可以不用清浮动方法即clearfix 1.3.4 偏移量是相对于document 绝对定位的区别>

5.9K6 1

小结CSS的float属性

2007年，她从日出高校毕业后开始专注于演艺发展，并发表个人首张音乐专辑《天空》；同年，新垣结衣还主演了爱情片《恋空》，而她也凭借该片获得了多个电影新人奖项。...3.4 老IE中的问题 IE6、IE7有一些浮动相关 bug，由于越来越多的设计师不再支持 IE6 了，你也可以不关注它。...(2)双倍边距bug：处理 IE6 时，需要记住的事情是，如果在和浮动方向相同的方向上设置外边距(margin)，会引发双倍边距。...(4)IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉。快速修正：用父元素的底内补白(padding)代替。...例如上面1.2中创建网页布局中，就是将最下面的footer元素，设置为清除左右两边的浮动(clear:both;) #footer { ...

1.2K5 0

最全的CSS浏览器兼容整理

两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display...它实际上通过Javascript的判断来实现最小宽度。 6.DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距....LI中内容超过长度后以省略号显示的方法此方法适用与IE与OP浏览器的办法是给FLASH设置透明 19.怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值的方法...FORM标签这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式

1.6K3 1

小结CSS的float属性

而如果给div元素增加设置了float，看起来这个div元素会变得紧凑，宽度就是能把内容包裹住的宽度，例如：包裹性.png 3.3 其他问题被设置了float的元素会脱离文档流，效果是布局时看起来是会尽量往一边靠拢...、IE7有一些浮动相关 bug，由于越来越多的设计师不再支持 IE6 了，你也可以不关注它。...(2)双倍边距bug：处理 IE6 时，需要记住的事情是，如果在和浮动方向相同的方向上设置外边距(margin)，会引发双倍边距。...(4)IE7 中，底边距 bug是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉。快速修正：用父元素的底内补白(padding)代替。...例如上面1.2中创建网页布局中，就是将最下面的footer元素，设置为清除左右两边的浮动(clear:both;) #footer { ...

5.1K140 3

Web前端最全面试宝典- CSS篇

折叠结果遵循下列计算规则： 1）两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。 2）两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。...absolute 生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。 fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。...relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。...没有定位，元素出现在正常的流中。...解决方案是加一个全局的*{margin:0;padding:0;}来统一。 3）IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

1.1K1 0

CSS 中你需要知道 auto 的一切！

在我们的例子中，这种情况发生了。但是，如果布局是rtl，那么margin-left将被忽略。 ?...这使元素相对于包含块的边缘水平居中。 ? 具有绝对定位元素的 margin:auto ? 另一个不太常见的将绝对定位元素居中的用例是margin: auto。...使用CSS网格时，可以使用自动页边距实现类似于 flexbox 的结果。...接下来我要解释的是对我来说是新的，我在研究本文时学到了它。考虑下面的模型: ? 我们有一个有内边距的 wrapper 元素，还有一个子项。子项目是绝对定位的，但没有任何定位属性。...Flexbox 和自动边距当谈到flexbox时，它有无限的可能性。通过将其与自动边距相结合，我们可以构建功能强大的布局。考虑下面的例子 ? 我们在右侧包含一行标题，描述和一个操作按钮的行。

5.5K3 0

对html与body的一些研究与理解

IE6下body设置background颜色边框和边距后的表现还有一点可以证明我上面的推论，就是一旦设置了节点的background背景色之后，的背景色将失效。...Firefox浏览器下html标签支持margin外边距这是缩放到500像素宽的图片，仔细看还是会发现IE6下margin没有起作用，顶边的是30像素的边框，Firefox下margin起作用了，可以看到...，如果inline属性的标签，如果没有浮动，zoom，或是绝对定位之类属性是不支持百分比高度的，block或inline-block属性可以说是高度百分比起作用的前提条件之一吧。...而这个透明层就使用绝对定位且与这个div>平级，高宽100%显示，就可以使得无论怎么滚动这个透明覆盖层都是满屏显示的。这其实也就解决IE6下浮动层固定定位的经典方法。...*+html据说只有IE7认得它。

2.1K3 0

大型编程电视剧连载 | CSS知识点硬核整理归纳（二）

5.4.5.2、嵌套块元素垂直外边距的合并对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。 ?...生成的块级框和我们前面的行内块极其相似。下面举例我们生活中很常见的一个样式：div 水平排列。...7.2、边偏移简单说，我们定位的盒子，是通过边偏移来移动位置的。在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）。...原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。 7.3.3、绝对定位(absolute) 绝对定位是元素以带有定位的父级元素来移动位置，也就是我们常说的拼爹。...7.3.4、固定定位(fixed) 固定定位是绝对定位的一种特殊形式：（认死理型）如果说绝对定位是一个矩形那么固定定位就类似于正方形完全脱标 —— 完全不占位置；只认浏览器的可视窗口 ——

1.8K2 0

【CSS】定位 ④ ( 绝对定位特点 | 相对定位不脱标示例 | 绝对定位脱标示例 )

一、绝对定位特点 ---- 绝对定位以带有定位的父级元素为基准 , 通过边偏移移动位置 ; 如果绝对定位的元素的父级元素没有定位 , 那么会一直向上查找有定位的父级元素 , 直到浏览器...; 绝对定位元素不保留原来的位置 , 是完全脱离标准流的 ( 脱标 ) ; 这里与相对定位进行对比 , 相对定位是相对于盒子在普通流模式下的位置进行设置的 ; 相对定位是不脱标的..., 原来的位置还会进行保留 ; 二、相对定位不脱标示例 ---- 相对定位 , 会保留盒子的原始位置 , 如果有其它标准流盒子在后面 , 会在相对定位的盒子原始位置的基础上进行排列 ; 代码示例...蓝色的盒子是相对定位的元素 , 红色盒子是标准流元素 , 标准流元素会在相对定位元素原坐标的基础上进行排列 ; 三、绝对定位脱标示例 ---- 绝对定位会脱离标准流 , 后续的标准流元素会忽略掉绝对定位的元素...下面的蓝色盒子是绝对定位元素 , 该元素脱离标准流 , 下方的红色盒子是标准流元素 , 直接放置在父盒子左上角 ;

9642 0

【CSS】CSS 总结 ⑥ ( 盒子模型摆放机制 - 普通流浮动定位 | 浮动 - 脱离标准流 | 清除浮动语法 | 额外标签法 | after 伪元素清除浮动 ) ★

a 等 ; 浮动 : 盒子模型在普通流基础上覆盖显示 , 多个块级元素可以在同一行相互覆盖显示 ; 定位 : 盒子模型在浏览器指定位置显示 ; 普通流相当于 Android 中的...线性布局 ; 浮动相当于 Android 中的帧布局或相对布局或约束布局 ; 定位相当于 Android 中的绝对布局 ; 2、浮动语法说明为元素设置了浮动 CSS 属性...父容器内边距 ; 二、CSS 清除浮动 1、清除浮动简介在开发页面时 , 遇到下面的情况 , 父容器没有设置内容高度样式 , 容器中的子元素设置了浮动样式 , 脱离了标准流 , 高度会默认设置为...在该父容器盒子的内部 , 插入新的子元素 , 该子元素设置选择器中的样式 ; .clearfix:after { clear: both; } 低版本浏览器 IE6 / IE7 清除浮动样式...: .clearfix { *zoom: 1; } 声明完上述元素后 , 在需要清除浮动元素的父容器中 , 声明 clearfix 类 ; div class="father1

2021 0

第141天：前端开发中浏览器兼容性问题总结（二）

IE6双倍边距的问题问题： ie6中设置浮动，同时又设置margin时，会出现双倍边距的问题例float:left;width:100px;margin:0 100px; 解决：设置...IE6 width为奇数，右边多出1px的问题问题：父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1像素解决：将宽度的奇数值改成偶数 12....IE6 子元素绝对定位的问题问题：父级元素使用padding后，子元素使用绝对定位，不能精确定位解决：在子元素中设置 _left:-20px; _top:-1px;...4、IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。 28....IE6 绝对定位的问题问题： div style="position:relative;border:1px solid orange;text-align:center;"> div style

1.9K2 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭