子匠_Zijor | 前端开发 / 程序媛 / 潜心学艺。

标签:CSS兼容性

IE Hacks 学习笔记汇总

选择器 Hacks

  • html .selector // 仅IE4~6支持;

*+html .selector // 仅IE7标准模式和IE8兼容模式(IE7标准)支持;

*:first-child+html #selector // 仅IE7标准模式和IE8兼容模式(IE7标准)支持;…

+ 阅读更多

针对IE6下的bug处理方法 汇总(持续更新中…)

IE6的条件注释语句:

<!-- [if IE6]>
    <link href="ie6.css" rel="stylesheet" type="text/css">
<![endif]-->

不支持PNG图片透明度

问题:

PNG文件格式最大的优点是支持alpha透明度。但是IE6并不直接支持PNG透明度,IE7及其以上版本浏览器则支持。…

+ 阅读更多

用float clear和BFC清除浮动 学习总结

CSS定位机制有三种,分别是普通流、浮动和绝对定位。浮动能很好地完成一些布局,在页面布局中的地位举足轻重,但也随之带来了不少的副作用,让人即爱又恨。如能消除浮动带来的副作用,浮动还是十分好用的一种布局方式。所谓的清除浮动,目的基本上都是为了消除浮动带来的副作用,常用的清除浮动的方法有CSS…

+ 阅读更多

BFC布局 学习总结

一. w3c规范中的BFC定义:

“浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文)。…

+ 阅读更多

CSS等高布局的实现方法

等高布局目前最流行的方法就是集“隐藏容器溢出”、“正内补丁”和“负内补丁”于一身的方法,有木有不明觉厉的赶脚?抛开这些乱七八糟的专有名词,其实就是比较常规的布局而已。…

+ 阅读更多

三栏布局:”两边固定中间栏宽度自适应” 的实现方法

系列文章:《两栏布局:一栏固定宽度另一栏自适应 的实现方法
本文主要是总结三栏布局中的“中间栏固定宽度两边自适应”的布局方法。

方法1:两边绝对布局,中间使用margin

+ 阅读更多

两栏布局:一栏固定宽度另一栏自适应 的实现方法

响应式页面布局的迅速普及,一栏固定宽度另一栏自适应宽度的需求比较常见。是时候mark down一下了。

假如我们要实现左右两栏布局,左栏固定宽度,右栏宽度自适应。以下是一些常用的实现方法。…

+ 阅读更多

line-height:1.5、1.5em与150%的区别

先来栗子感受下这两者的视觉区别:

line-height: 1.5

我的行高是1.5
我的行高是1.5

line-height: 150%

我的行高是150%
我的行高是150%

line-height: 1.5em

我的行高是1.5em
我的行高是1.5em

+ 阅读更多

CSS实现水平垂直居中布局的方法 总结

居中的美感置于当下亦不为过时。元素的居中对齐,能起到视觉聚焦的作用和避免处女座抓狂。在页面重构中,遇到最多的布局需求就是元素居中,因此作此总结。…

+ 阅读更多

浏览器模式和文档模式 学习笔记

模式的触发方式

浏览器根据DOCTYPE是否存在以及使用的DTD声明来选择要启动的文档模式。

混杂模式的触发方式

  1. 没有doctype声明;
  2. 在页面的第一行添加XML声明如"",在IE6下会触发混杂模式;
  3. 前面有空格或注释;

准标准模式的触发方式

  1. 加DOCTYPE声明,比如:
  1. 设置X-UA-Compatible触发;

触发标准模式

文档模式的检测

+ 阅读更多

透明背景兼容性处理

可使用opacity属性、rgba或者png图片实现透明背景。

使用opacity

譬如:
opacity:0.8 // 取值范围为0~1;针对新版本浏览器;

filter:alpha(opacity=80) // 取值范围为0~100;针对IE…

+ 阅读更多