双外边距浮动bug；3像素文本偏移bug；IE6以下相对定位中的绝对定位bug

IE下的双外边距浮动bug

最常见且最容易发现的额一个bug是IE 6和最低版本中的双外边距浮动bug.这个bug是任何浮动元素上的外边距加倍. 上面代码中,div盒子向左边浮动,设置的margin-left的值是10px.在chrome浏览器,Firefox浏览器中: 在ie6中,距离为20px: 这个bug很容易修复,就是设置元素的display属性为inline就行,元素本身是浮动,设置inline不会影响显示方式. 显示样式:…

常见IE浏览器bug及其修复方案(双外边距、3像素偏移、绝对定位)

1. 双外边距浮动bug IE6和更低版本中存在双外边距浮动bug,顾名思义,这个Windows bug使任何浮动元素上的外边距加倍 bug重现: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>双外边距bug</title> <style type="text/css"> * { margin: 0; padd…

应对ie双外边距，不使用hack

1.在浮动元素内层加一层div 2.使用不浮动的内层外边距来定义距离 ie在浮动时,并且使用外边距,会产生双倍外边距.…

3像素文本偏移bug 解决方案

CSS中常见的BUG调试

1.布局--layout 布局是windows提出的概念,用于控制元素的尺寸和定位. 拥有布局的元素负责自身及其子元素的尺寸及定位,而没有布局的元素仅仅能依靠近期的祖先元素进行控制. 通常在IE6中出现的BUG.非常可能是由于布局的缘故而产生的,因而修复IE中BUG的时候,第一件事就是尝试通过规则迫使元素拥有布局来看是否能修复. 默认情况下拥有布局的元素包含:body.html(标准模式下).table.tr.td.img.hr.input.select.textarea.button.ifra…

css内边距与外边距的区别

你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解.介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理. Margin是什么 CSS 边距属性…

(转)css内边距与外边距的区别，精辟啊

css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了与margin打交道…

CSS框模型（框模型概述、内边距、边框、外边距、外边距合并）

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式.这可以分别进行,也可以使用通用选择…

CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http://www.cnblogs.com/hh54188/archive/2010/12/28/1919078.html,此外,对于如何计算父元素的width和height,该文章也说明了~ CSS 框模型概述元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框…

CSS 外边距

CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”. 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. ################ CSS 外边距属性属性描述margin 简写属性.在一个声明中设置所有外边距属性.margin-bottom 设置元素的下外边距.margin-left 设置元素的左外边距.margin-right 设置元素的右外边距.margin-top 设置元素的上外边距.######…

CSS外边距合并（塌陷/margin越界）

原文简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5.出现的情况 1.什么是外边距合并?(折叠外边距) 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.而左右外边距不合并. 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距.这种…

x(22)0907第四天__ 垂直外边距重叠

外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素垂直外边距重叠垂直相邻的两个 div,上面的 div 设置了 margin-bootom,遇到下面 div 设置的 margin-top,会发生重叠,产生一个较大的外边距 2. 父子元素垂直外边距重合父子元素 div 时,为子元素 div 设置上边距时,两个 div 都会发生向下偏移,此时父子元素的…

padding和margin——内边距和外边距

一.padding——内边距(内填充) 1.1.padding 简写属性在一个声明中设置所有填充属性.该属性可以有1到4个值. <style> div.outer{ width: 400px; height: 400px; border: 2px solid #000; } div.inner{ width: 200px; height: 200px; background-color:red ; padding: 50px; } </style> <body> <…

文本溢出、垂直外边距合并、BFC、hasLayout

今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overflow:hidden;text-overflow: ellipsis是基本.然后在控制多行文本溢出的时候需要用到弹性伸缩盒子-webkit-box ,包括设置盒子的伸缩方向和显示的行数. 用div内嵌div做一个小测试:发现对子元素,margin-left有效但是margin-top是无效的,问题的…

【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点. 说白了width:auto试图…

CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

---恢复内容开始--- 一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点. 说白了w…

完美解决浮动IE6 7中的兼容性BUG问题

想要创建出漂亮的网页设计,除了要认真学习每一个html和CSS代码之外,不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气,因为你本来写出的规规矩矩的代码,漂亮的设计就此就要完成了,却发现呈现出的效果压根不是你所期望的那样,漂亮的布局被破坏的体无完肤.更可气的是当你查找一遍代码中的错误时,却压根找不出来.这时候你就迫切需要了解一下IE6和它的那些同伙的坏脾气了,因为很可能它们就是罪魁祸首.到底IE6的那几个家伙们到底是如何搞乱你的设计的?咱们双该如何解决呢,别急,请听我慢慢道来:…

{03--CSS布局设置} 盒模型二 padding bode margin 标准文档流块级元素和行内元素浮动 margin的用法文本属性和字体属性超链接导航栏 background 定位 z-index

03--CSS布局设置本节目录一盒模型二 padding(内边距) 三 boder(边框) 四简单认识一下margin(外边距) 五标准文档流六块级元素和行内元素七浮动八 margin的用法九文本属性和字体属性十超链接导航栏案例十一 background(背景) 十二定位十三 z-index 一盒模型盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型.…

0019 盒子模型（CSS重点）：边框、内外边距、布局稳定性、PS

typora-copy-images-to: media 第01阶段.前端基础.盒子模型盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位主题思路: 目标: 理解: 能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用: 能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例 1.看透网页布局的本质…

CSS 外边距合并

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆. 简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并.请看下图: 当一个元素包含在另一个元素中…

CSS Margin(外边距)

CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边距.也可以一次改变所有的属性. 可能的值值说明 auto 设置浏览器边距.这样做的结果会依赖于浏览器 length 定义一个固定的margin(使用像素,pt,em等) % 定义一个使用百分比的边距 Margin可以使用负值,重叠的内容. 在CSS中,它可以指定不同的侧面不同的边距: 实例 m…

外边距叠加collapsing-margin

原载:Smallni | http://www.smallni.com/collapsing-margin/ 恩,margin叠加一直是个问题,也是我们一直会遇到的问题,很久以前就想把这个知识点整理下,做一个详细的讲解和分析.前一段时间知乎上有人问了这个问题,刚好克军也做了个回答,但回答的不尽其然,并且我做了自己的分析.刚好今天写到自己的博客里,并做一个更详细的探讨. 今天主要介绍的就是:到底神马是外边距叠加?神马情况下外边距会叠加?如何避免外边距叠加? 外边距叠加的定义请先阅读w3c关于co…

css 的包含块、负外边距，字体，文本行高

一.包含块目的:确定元素的位置和相对大小(%) 1.正常文档流元素和浮动元素 ---- 父元素的 content-box 2.绝对定位元素 ---- 父元素的 padding-box 3.固定定位元素 ---- 视口二.负外边距 document.documentElement.clientWidth; 视口宽度 window.onresize 监控视口改变三.字体字体简写: 当 line-height 书写在 font 属性上 ,会覆盖 line-height 的值字体大小: 默认是…

python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

昨日内容回顾高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 a LoVe HAte 必须要遵循这个准则 “爱恨准则” nth-child(3n+1) first-child last-child 继承性和层叠性继承性: 文本的属性: color text-*,line-*,font-* 盒子属性定位布局的元素层叠性: 1.先看标签元素有没有被选中,如果选中…

CSS 内外边距 float positio属性

一.外边距和内边 margin: 用于控制元素与元素之间的距离外边距:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding: 用于控制内容与边框之间的距离内边距: Border(边框) 围绕在内边距和内容外的边框. Content(内容) 盒子的内容,显示文本和图像. margin:10px 5px 15px 20px;-----------上右下左 margin:10px 5p…

css细节复习笔记——内边距、边框和外边距

一个元素的内边距.边框和外边距属性会影响着整个文档如何布局,更重要的是,它们会严重影响给定元素的外观. 高度和宽度这两个属性不能应用到行内非替换元素,其高度和宽度由链接的内容确定,而不是由创作人员确定.正常流中的元素很少有设定的高度. 外边距和内边距如果元素有背景,则会影响使用内边距和外边距,因为背景会延伸到内边距中,但不会延伸到外边距.为元素指定的内边距和外边距会影响元素的背景何时结束. 为内容区的个边增加10像素空白,margin:10px,类似于html的hspace和vspace,设…

CSS外边距合并的几种情况

CSS外边距合并的几种情况外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距在CSS1中就有 The width of the margin on non-floating block-level elements specifies the minimum distance to the edges of surrounding boxes. Two or more adjoining vertical ma…

BFC 以及外边距合并问题

BFC定义: BFC(Block formatting context)直译为"块级格式化上下文". 它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. BFC布局规则特性: 在BFC中 , 盒子从顶端开始垂直的一个接一个排列盒子垂直方向的距离有margin决定,属于同一个BFC的两个相邻的盒子发生重叠在BFC中,每个盒子的左外边距(margin-left)会触碰到容器的左边缘(bor…

CSS：CSS margin(外边距)

ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性. 可能的值值说明 auto 设置浏览器边距.这样做的结果会依赖于浏览器 length 定义一个固定的margin(使用像素,pt,em等) % 定义一个…

【双外边距浮动bug；3像素文本偏移bug；IE6以下相对定位中的绝对定位bug】的更多相关文章