仗键天下 策码一生

IE6的兼容性问题一直都是前端工程师的恶梦，为了早早脱离这种困境，本文整理了一些相关兼容性的知识，感兴趣的朋友可以参考下哈，希望可以帮助到你1、IE6怪异解析之padding与border算入宽高 原因：未加文档声明造成非盒模型解析 解决方法：加入文档声明 2、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距） 解决方法：display:inl

行内元素之间会产生间隙bug问题的场景：1.常见的行内快2、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。如下代码：122333解决办法有两种方法一：将元素写成一行，中间不换行；12233方法二：设置font-size:0div{font-size:0px;}a,em{font-size:10px;

中文版Chrome浏览器不支持12px以下字体的解决方案 Chrome 27之前的中文版桌面浏览器会默认设定页面的最小字号是12px，英文版则没有限制，主要是因为chrome认为汉字小于12px就会增加识别难度，尤其是中文常用的宋体和微软雅黑。而我们在实际项目中，对于数字/英文内容，其他字体的文本可能会有特殊的需求要求它们以更小的字号来显示，这个时候就需要取消浏览器的自动调整功能了。 

在页面构建过程中，我们经常会遇到margin设置无效的情况，使人困扰，下面看看到底是怎么回事吧。“collapsing margins”（折叠margin）的意思是：2个或以上盒模型之间（关系可以是相邻或嵌套）相邻的margin属性（这之间不能有非空内容、padding区域、border边框或使用清除分离方法）结合表示为一个单独的margin。在css2.1中，水平的margin不会

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSSHack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生 效，例如表格元素中的、、等，而像、这样的元素是没有valign特性的，因此使用vertical-a

初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了，随着以后工作问题层出不穷，才逐渐了解到CSS并不是几个style属性那么简单，最近看了一些关于行高的知识，就此总结一下。      所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识：      顶线、中线、基线、底线      Test span {

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明http://www.blogbus.com/catller-logs/30679536.htmlinline为display属性：设置是否及如何显示元素 ---> 此元素会被显示为内联元素，元素前后没有换行符。在，可以使其在一行中显示。但当这个时候我无法给li限制高度和宽度。给布局上带来很大的不便。Li，

雅虎工程师提供的css初始化代码：body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }body { background:#fff; color:#555; f

为什么有些网页既设背景图又设背景色？首先须知：同时设置两者优先显示的是图片,图片显示不了的地方才显示背景颜色。总结分析知乎和百度上的答案，结论如下：1.考虑到大屏下（如1920*1080或者更大）网站背景图不足以撑满整个显示区域，所以背景图以外的部分要显示背景色，并且背景图边缘部分必须处理妥当保证平滑过渡到背景色，不会有突兀的感觉。2.根据网站的主色调定义一个背景色，利于减少视觉疲

margin重叠现象探讨研究在网页页面布局中，经常会出现以下两种现象：1、相邻的两个普通元素，上下边距，不是简单的相加，而是取边距较大者的元素的边距值。如例12、关系为父子的两个div元素，竖直方向上如果两个元素都设有margin值，则会取margin值较大的元素的边距值。如例2例1：HTML代码：div class="bro1">div1/div>d

子元素浮动父容器高度不能自适应的CSS解决方法 网页前端工作者经常会遇到子元素设置float浮动后导致父容器高度不能自适应，也就是俗称的外部容器不能被“撑大”，常见表现为背景或边框异常，这时我们就需要来清除“闭合浮动”，方法主要有以下4种：1.  额外标签法这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼

本文转载自:http://www.topcss.org/?p=94，有修改。　　负数给人总是一种消极、否定、拒绝之感，不过有时利用负margin可以达到奇妙的效果，今天就表一表负值在页面布局中的应用。这里说的负值主要指的是负margin。　　关于负margin的原理建议大家看看这篇文章：http://www.cnblogs.com/2050/archive/2012/08/13/26364

css中的负边距(negative margin)是布局中的一个常用技巧，只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距，所以掌握它的用法对于前端的同学来说，那是必须的。本文非常基础，老鸟可以略过。 负边距在普通文档流中的作用和效果那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位的元素等），其在页面中的位置是跟随者文档流的变化而变化

方法1，用html特殊字符：首先附上效果图：以上的效果完全是用 css 来实现的，那么是怎么实现的呢？我们知道 html 中有一些特殊的字符，具体的请点击 HTML特殊字符大全。通过特殊字符，利用 css 中的 margin 或者 position 方法完全可以实现以上效果。DOCTYPE HTML>html lang="en-US">head> met

字体 css