CSS多列布局和常见bug解析

CSS多列布局和常见bug解析

多列布局

【1】. column-count - - - - -定义列数

【2】. column-gap - - - - -设置列与列之间距离

【3】.column-rule - - - - -设置列与列之间的分割线

• 分属性： column-rule-width | column-rule-style | column-rule-color

【4】.column-span:[none | all]- - - - - 设置是否跨列

【5】.column-width - - - - -设置每列最小宽度，列数随之改变

【6】.columns: column-width column-count 简写

图片防止分割：break-inside:avoid;

浏览器兼容问题：各大浏览器的开发的核心架构 和 内核不一样，导致各大浏览器没有办法重合，对于同样的html 或 css解析不一样，同样的代码在不同的浏览器表现形式不一样，就简称bug,要解决这个bug，就需要对不同的浏览器进行不同的操作，这个操作叫浏览器的兼容。

IE浏览器中常见CSS解析Bug及hack

【1】 图片有边框BUG

图片加在IE上出现边框
Hack:给图片加border:0;或者border:0 none;

【2】图片间隙

div中的图片间隙BUG，在div中插入图片时，图片会将div下方撑大大约三像素。
Hack1:将转为块状元素，给添加声明：display:block;

【3】 双倍浮向（双倍边距）（只有IE6出现）
当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
hack:给浮动元素添加声明：display:inline;

【4 】按钮元素默认大小不一
描述：各浏览器中按钮元素大小不一致
hack1： 统一大小/（用a标记模拟）
hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。
hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。

【5】透明属性
兼容其他浏览器写法：opacity:value;(value的取值范围0-1;
例：opacity:0.5;
IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)