3列、2列自适应布局,中部内容优先显示3列布局等方法。

最近想整理一下几种div+css布局的方法,比如自适应高度,自适应宽度,3列,2列,中部内容提前、特殊布局等等,我会慢慢在这篇博客中更新。

1. 固定宽度,中部DIV内容优先显示布局

说明:这种布局一般常见与社交网站,例如QQ空间,朋友网等等,特点是把中部信息的内容放在前面显示,左侧菜单内容最后显示。
实现方法:重点在于使用了margin-left:-960px;这样样式,如果能深入了解一下margin的负值和浮动原理就可以很好的理解此方法了。
下面是demo:

提示:你可以先修改部分代码再运行。

Read More

IE6、7、8,火狐等浏览器常见兼容性问题整理

首先,浏览器兼容性的问题有很多,要在工作中不断总结,这里根本不可能说全,非常欢迎您用评论的方式帮我补充。

IE6能识别下划线”_”和星号” * “,IE7能识别星号” * “,但不能识别下划线”_”,IE8能识别” 9″,但不能识别下划线”_”,而firefox两个都不能认识,却可以识别‘!important’。等等
书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面列举常用的CSS hack方法:

1:!important
!important作用是提高指定样式规则的应用优先权。
IE7以及所有标准浏览器能识别!important
区别IE6与IE7与其他浏览器

.browserTest {
border:20px solid #60A179 !important;
border:20px solid #00F;
}

在Mozilla中或者IE7浏览时候,能够理解!important的优先级,因此显示#60A179的颜色:
在IE6中浏览时候,不能够理解!important的优先级,因此显示#00F的颜色:

2:*
IE都能识别*;标准浏览器(如火狐)不能识别*
区别IE与火狐

.browserTest {
border:20px solid #60A179;
*border:20px solid #00F;
}

区别IE7,IE6与火狐

.browserTest{
border:20px solid #60A179;
*border:20px solid #00F !important;
*border:20px solid ###;
}

3:_
IE6支持下划线,IE7和firefox均不支持下划线
区别IE7,IE6与火狐

.browserTest {
border:20px solid #60A179;
*border:20px solid #00F;
_border:20px solid ###;
}

Read More