1.margin塌陷,通俗叫法。

假如一个盒子box里边嵌套了两个盒子(记为box1,box2)。box1的margin-top不会如预想的一样在box顶部撑开一个边距,而是以包含box的容器上边界为基准撑开边距。

解决方法:一、设置box1 padding-top.

二、设置box display:absolute.

三、设置box overflow:hidden。

2.如图示:

此类问题代码为:box{width:500px ; height:50px;line-height:50px;  text-align:center; border:1px solid #333;}

box span{display:inline-block; width:100px; height: 20px;}

出现此问题有如下几点:父级元素设置text-align:center;使得盒子内文字居中,此时若不设置 span 为inline-block; ,span会自动撑开;

若span设置为inline-block; ,其宽 度和高度的设置不影响文字位置。

解决方法为:一、父元素设置padding-top。

二、父元素仍设置居中,span 不设置内联块盒子,而设置其内边距,撑开所需要的宽度。

效果如下:

css中bug记录的更多相关文章

  1. 浏览器中CSS的BUG

    对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 其它请参考:CSS hack 针对IE6,IE7,fir ...

  2. HTML/CSS中常遇到的bug 一些注意事项总结

    1.IE6下横向双倍margin bug (触发条件:块属性标签:float:横向margin设置:IE6下.解决办法:css中加入display:inline.) 2.css中公用属性首先声明:如对 ...

  3. CSS中常见的BUG调试

    1.布局--layout 布局是windows提出的概念,用于控制元素的尺寸和定位. 拥有布局的元素负责自身及其子元素的尺寸及定位,而没有布局的元素仅仅能依靠近期的祖先元素进行控制. 通常在IE6中出 ...

  4. IE6中CSS常见BUG全集及解决方案——摘自网友

    IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...

  5. IE6的那些css常见bug(汇总)

    IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...

  6. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  7. CSS中一些常见的兼容性问题

    CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...

  8. 各种主流浏览器CSS、BUG兼容

    1.div的垂直居中问题 vertical-align:middle;将行距增加到和整个DIV一样高 line-height:200px;然后插入文字,就垂直居中了.缺点是要控制内容不要换行.---- ...

  9. CSS中"!important"的使用

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...

随机推荐

  1. 12款 jquery轮播插件

    Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...

  2. J2EE 中 The function valueOf must be used with a prefix when a default namespace is not specified 错误

    jsp页面中,JSTL El表达式字符串比较常用方法 fn:contains 判断字符串是否包含另外一个字符串 <c:if test="${fn:contains(name, sear ...

  3. jquery怎么获取URL的参数

    function request(paras) {                var url = location.href;                var paraString = ur ...

  4. Global.asax使用2

    ASP.NET中利用Application和Session统计在线人数.历史访问量 先来简单说一下ASP.NET中的Application和Session 下图是我们非常熟悉的Web应用程序的结构: ...

  5. iOS-设计模式之Block

    Block是代码块, Block定义 返回值 (^ 块名)(参数1,参数2…); 在定义Block的时候可以使用typedef 重命名一下. typedef void(^blockName)(NSSt ...

  6. MYSQL数据去重与外表填充

    经常要对数据库中的数据进行去重,有时还需要使用外部表填冲数据,本文档记录数据去重与外表填充数据. date:2016/8/17 author:wangxl 1 需求 对user_info1表去重,并添 ...

  7. R语言数据合并使用merge数据追加使用rbind和cbind

    R语言中的横向数据合并merge及纵向数据合并rbind的使用 我们经常会遇到两个数据框拥有相同的时间或观测值,但这些列却不尽相同.处理的办法就是使用merge(x, y ,by.x = ,by.y ...

  8. Jmeter -- 初体验

    一.Jmeter参数 在命令行输入Jmeter --help得到以下信息: To run Apache JMeter in GUI mode:Double-click on the ApacheJMe ...

  9. WordPress教程之判断文章所属分类函数in_category、is_category

    最近自己在修改一个采用Wordpress程序的博客的时候需要用到一个特殊的功能:我需要判断这篇文章是属于哪些分类,如果属于我设定的分类下的文章,则输出一个DIV内容.按道理说实现这个功能应该不算太难, ...

  10. Weblogic缓存

    缓存:如果脱离IDE工具的话,weblogic的文件会在\user_projects\domains\base_domain\servers\AdminServer\tmp\_WL_user文件夹中 ...