【bug记录：IE8，包含块min-height/height共存时的高度计算bug】的更多相关文章

bug记录：IE8，包含块min-height/height共存时的高度计算bug

问题的条件有: A元素是B元素的包含块. A元素设置overflow:hidden;,并同时设置了height和min-height,同时height计算值 < min-height 原生IE8浏览器,或者IE9浏览器的IE8兼容性模式(以下统称为IE8) 期待结果: 若B元素为absolute定位元素,A元素为relative定位元素,则B元素的包含块高度为A元素的padding-edge高度 若A.B元素均为常规流定位元素,则B元素的包含块高度为A元素的content-box高度 若A元素同…

CSS2.1SPEC：视觉格式化模型之包含块

原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制.本文首先从包含块写起,一方面总结标准中相应的阐述,并且结合具体的实例进行具体分析,特别是对于CSS2.1支持并不完善的IE6/7.由于经验尚浅,文中肯定存在一些问题,希望大家可以多多包涵并且指出问题.   阅读本文前,应当对于CSS盒模型以及视觉格式化模型中会产生的各种框(box,也可以成为盒子)以及各种不同的布局方式有比较准确的认识,可以阅读杜瑶大神…

# bug 查找 (一) 快速记录 IE8 下三个问题

bug 查找 (一) 快速记录 IE8 下三个问题 昨天 pc 端网站上灰度,发现多个在 IE8 下的问题,描述和解决方案如下: 第一个问题是 css 文件过大 现象 把项目所有的 css 打包成单个文件,在现代的浏览器下是没有问题的,在 IE11 下的 IE8 模式也是没有问题. 但是在真实的 IE8 下,发现某个页面的 css 不能生效,百思不得其解. 然后,几个人在代码层面逐步排查问题,排查方法是:写一个 body 样式,放在不同的位置去试试,看看是否生效,同时把不能原来不生效的 css…

转: Firefox 浏览器对 TABLE 中绝对定位元素包含块的判定有错误

标准参考 元素的包含块 W3C CSS2.1 规范中规定,绝对定位元素的包含块(containing block),由离它最近的 position 特性值是 "absolute"."fixed"."relative" 之一的祖先元素组成:如果这个祖先元素不存在,则包含块由根元素组成. 绝对定位元素的定位 绝对定位元素的定位,依赖于其包含块.也就是说,当绝对定位元素的 "top"."left" 值被设置之后,…

<p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签？

最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li> </ol> </p> <div>How are you?</div> </body> <script src="jquery-3.1.1.js"></script> <script> v…

* CSS 视觉格式化（基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框）

前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的正确效果,还是浏览器兼容性的bug. 基本概念 [基本框] CSS假定每个元素都会生成一个或多个矩形框,这称为元素框. 各元素框中心有一个内容区(content area). 这个内容区周围有可选的内边距.边框和外边距. 可以用多种属性设置外边距.边框和内边距.内容的背景也会应用到内边距.外边距通常…

【疑点】<p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签？

最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li> </ol> </p> <div>How are you?</div> </body> <script src="jquery-3.1.1.js"></script> <script> v…

CSS学习笔记——包含块 containing block

以下内容翻译自CSS 2.1官方文档.网址:https://www.w3.org/TR/CSS2/visudet.html#strut 有时,一个元素的盒子的位置和尺寸根据一个确定的矩形计算,这个确定的矩形叫这个元素的包含块.一个元素的包含块根据以下规则确定: 1.根元素所在的包含块叫初始包含块 initial containing block.对于连续媒体设备(continuous media),初始包含块的大小等于视口viewpor的大小,基点在画布的原点(视口左上角):对于分页媒体(pag…

由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow.containing block.bfc.margin collapse,base line,writing mode,bidi,这样一路问下去的,奈何第一个问题(亲我真的只问了position有哪些取值和行为啊)就悲剧了…… 说到position,那么稍微…

包含块( Containing block ) 转自W3CHelp

包含块简介 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称作是包含块( containing block ). 一般来说,(元素)生成的框会扮演它子孙元素包含块的角色:我们称之为:一个(元素的)框为它的子孙节点建造了包含块.包含块是一个相对的概念. <div> <table> <tr> <td>hi</td> </tr> </table> </div> 以上代码为例,DI…

CSS包含块containing block详解

“包含块(containing block)”,W3c中一个很重要的概念,今天带大家一起来好好研究下. 初步理解 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称作是包含块( containing block ). 一般来说,(元素)生成的框会扮演它子孙元素包含块的角色,我们称之为:一个(元素的)框为它的子孙节点建造了包含块.包含块是一个相对的概念. <div> <table> <tr> <td>hi</td>…

css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外界元素的重叠现象. 先了解几个概念:可替换元素.不可替换元素(non-replaced element).包含块(containing block).块级格式化上下文(BFC). 可参考css2.1 中文规范 1.可替换元素与不可替换元素 根据css1 中所述:所谓可替换元素就是浏览器根据元素的标签…

（转自MDN）CSS基础一定要看的包含块（containing block）

之前在写<个人常用的水平居中方法>这篇文章的时候,百分比问题涉及到了包含块(containing block)这个概念. 今天刷面试题的时候,又看到了containing block这个词,之前计算百分比考虑了几种情况(如那些属性值根据哪个元素计算的),但不知道所谓的'哪个元素'就是包含块.系统的看了看MDN中的内容,感觉受益匪浅.大家可以移步去MDN看,我这篇仅仅是在原文基础上加了个小知识点--client相关值. 原文 MDN布局和包含块 一个元素的尺寸和位置经常受其包含块(contain…

快速记录 IE8 下三个问题

快速记录 IE8 下三个问题 昨天 pc 端网站上灰度,发现多个在 IE8 下的问题,描述和解决方案如下: 第一个问题是 css 文件过大 现象 把项目所有的 css 打包成单个文件,在现代的浏览器下是没有问题的,在 IE11 下的 IE8 模式也是没有问题. 但是在真实的 IE8 下,发现某个页面的 css 不能生效,百思不得其解. 然后,几个人在代码层面逐步排查问题,排查方法是:写一个 body 样式,放在不同的位置去试试,看看是否生效,同时把不能原来不生效的 css 全部注释掉. 已过几轮…

js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）

js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0) dinbror/blazy: Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and m…

ArcGIS 10.1 BUG记录

声明:笔者使用ARCGIS 10.1 XXX版,YYY版可能没有此处描写的问题 1. 关于注册数据库 发布启用FA的服务,需要为数据库进行ArcGIS Server注册,若通过ArcMap执行注册,会发现无法注册成功,Analize不能通过.此情况下,应找到企业数据库的链接位置,一般在 C:\Users\{yourname}\AppData\Roaming\ESRI\Desktop10.1\ArcCatalog\{yoursdedatabase}.sde 具体位置可能由于个人设置而不同,可通过在…

在GridView列表中使用图片显示记录是否包含附件

在我的前面很多文章中,都介绍过通用附件模块的管理,本篇随笔主要介绍在一些应用模块中的列表展示中,包含附件的记录,在GridView列表界面中使用图标来快速显示是否有附件的情况. 1.通用附件模块的应用界面效果 例如在我的<通用人员信息管理模块>中(可以参考随笔<Winform开发框架之通用人员信息管理>.<Winform开发框架之通用人员信息管理实现代码介绍>,很多都使用了<通用附件管理模块>(可以参考<Winform开发框架之附件管理应用>来处…

HTML中为何P标签内不可包含块元素？

起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和block-line块元素,因为HTML里几乎所有元素都属于内联元素或者块元素中的一种. in-line这个词有很多种解释:内嵌.内联.行内.线级等,但是,它们都是表示相同的意思,在这里我们选择习惯的叫法–内联. 先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元…

包含块、层叠上下文、BFC

包含块 什么是包含块?简单来说,就是决定一个元素大小和定位的元素.一个元素会为它的内部元素创建包含块,但也不能说元素的包含块就是它的父元素: 1.position:fixed 的元素 包含块是当前可视窗口 2.position:absolute 的元素 包含块是最近的 position属性为非static的祖先元素 3.静态定位和相对定位 的元素 包含块是最近的块级祖先元素 层叠上下文 跟BFC相似,是可以创建出来的(z-index: Number) 同一个层叠上下文中,层叠级别由低到高:边框和…

css包含块containing block

<css权威指南>P167: The Containing Block Every element is laid out with respect to its containing block; in a very real way, the containing block is the "layout context" for an element. CSS2.1 defines a series of rules for determining an elemen…

z-index要同级比较，absolute包含块外有overflow-hidden

z-index只能在position属性值为relative或absolute或fixed的元素上有效. z-index只决定同一父元素中的同级子元素的堆叠顺序. position:absolute 的包含块 外有overflow-hidden时,绝对定位元素也会被挡住…

a标签包含块级元素问题

a标签包含块级元素是不符合W3c标准的,但是淘宝也有这样的布局暂且认为可以这样(有时候布局需要这样写) 当a标签包含了div这样的块级元素时a标签是要转换成块级元素的使用display:block.但是a标签包含的div里如果还有a标签那么那么他就包含不住这里面的块级元素了,会出现只包含部分元素或者a标签里面没有内容或者块级元素在其外面当成同辈的元素.…

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

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

【bug记录】OS Lab3 踩坑记

OS Lab3 踩坑记 Lab3在之前Lab2的基础上,增加了进程建立.调度和中断异常处理.其中测试包括进程建立以及进程调度部分. 由于是第一次做bug记录,而且是调试完bug后再做的记录,所以导致记录不完全.但是为之后bug记录的习惯打下基础. 进程建立测试(env_check) 注意 env_setup_vm() 中的pgdir地址赋值. 在 envid2env() 中当有 checkperm 时,检查失败也要给 *penv 赋值 0 (容易忘记). 这里最好检查一下 curenv 是否存在…

前端bug记录

记录一下前端入门时期遇到的一些bug. 1.同步.异步问题 背景:Javascript语言的执行环境是单线程.即一次只能完成一个任务.若有多个任务则需排队逐个执行——前一个任务完成,再执行后一个任务. JS语言将任务执行模式分为异步和同步. 同步模式就是上一段的模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的.同步的: 异步模式则完全不同,每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则…

微信小程序bug记录与解决

微信小程序bug记录 textarea textarea在模拟器上没有padding,可是在真机上会自带padding,而且在外部改不了,并且在安卓和IOS上padding还不一样 第一张图是在开发工具上的,第二张图是在IOS真机上的.从上图可以看出来,在开发工具上显示很正常,而且没有padding,可是在真机上左上角就出现了padding,并且无论你在外部对textarea的padding做任何处理,都无法覆盖. 目前有一种解决方式是根据ios和android的不同平台来给teaxarea设置…

css 初始包含块

continuous media ,paged media 关于continuous media[连续媒体]和paged media[分页媒体] 直白的讲,continuous和paged media是两种媒体组,什么意思呢?对于我们每天接触到得信息种类,早有人替我们进行归类了,例如:投影机代表的媒体类型就是投影,归入分页媒体组,而平常使用的电脑屏幕 ,是归于连续媒体组. 初始化包含块 1. 根元素的包含块是一个矩形,叫做初始化包含块 2. 对于 [连续媒体]就是,初始化包含块的 尺寸等于vie…

CSS中包含块原理解析

CSS包含块原理解析 确定CSS中的包含块也确定就是元素的父元素.关键是:看元素是如何定位的.确定包含块很重要,比如设置百分比.另外也可以进行样式的继承等等. 分两个情况: 相对定位和静态定位 静态定位(默认)和相对定位的父元素都是最近的父元素. 绝对定位和固定定位 绝对定位和固定定位会脱离文档流,他们的包含块是距离它最近的定位祖先. 注意事项 浮动元素包含块就是最近的父元素,没有特殊意义.…

解决在IE6、7中用height来设定SELECT标签高度无效的兼容性问题

在IE6.7中用height来设定SELECT标签高度是无效的,宽度的话各浏览器设置都是一致的,解决方法就是在select外嵌套两层标签,一层用来遮挡select的默认边框(在IE6.7中设置border:0px也是无效的),另一层用来模拟”高度改变后的“select边框.代码如下html代码 <div class="standard_select"> <!--边框--> <div class="select_shelter">…

CSS中的包含块

1.初始包含块,浏览器viewport大小 2.非根元素,position:relative/static,包含块为最近的块级框,表格单元或行内祖先框的内容区 3.非根元素,position:absolute,包含块为最近的position不是static的祖先元素,没有的话就是初始包含块 - 若祖先为块级元素,包含块为祖先块从border的内边界以内的部分,即padding+context - 若为行内元素,根据文字方向确定.从左向右内容区左上角和右下角确定的框:从右向左为右上角和左下角确定的…