容器不扩展问题

解决办法：在divGroup里面加上

1

overflow:hidden;zoom:1;

ps:很多人都是在里面加个清除浮动空标签来解决，其实这个是错误办法。太增加代码量了

高度不适应

1.问题起因
高度不适应指的是，当内层对象的高度发生变化时，外层对象的高度不能自动进行调节，特别是当内层的对象使用margin或者padding只后。
如下：

1
2
3
4
5
6
7
8

#box {
	background-color:#eee;
}
#box p {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align:center;
}

解决：使用空div来占位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#box {
	background-color:#eee;
}
p {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align:center;
}
.clear-div {
	height:0px;
	overflow:hidden;
}
.box2 {
	background-color:#aaa;
}

或者为DIV加上border属性

IE捉迷藏bug

IE捉迷藏bug（peek-a-boo），之所以起这个名称是因为在某些条件下文本看起来消失了，只有在重新装载页面时才再度出现。出现这个bug的条件是：一个浮动元素后而跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的你元素中。如果清理元素砬到了浮动元素，那么中间的非浮支元素看起来消失了，隐到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现 ……

IE条件注释功能

条件注释是IE特有的一种功能，能对IE系列产品进行单独的XHTML代码处理，注意，主要是针对XHTML,而非CSS。
条件注释功能非常强大，可以进行true和false判断，例如：

程序代码

1

<!--[if IE]>此内容只有IE可见< ![endif]-->

……

_hack 及 IE7的hack方式

使用+hack可以区别IE与其他浏览器，但部分兼容性效果特别针对IE7设置。到目前为止，IE7还不支持下划线的属性写法，因此我们可以结合上面的使用方式，增加对IE7的hack设置。

代码如下：

1
2
3
4
5

#content{
 width:200px;/*Firefox可执行*/
 +width:300px;/*IE7可执行*/
 _width:400px;/*IE6可执行*/
 }

通过以上的css hack 设置，我们能够实现分别针对IE7/IE6及Firefox三类浏览器的样式设计。

+hack

+号hack方法是最近流行的一种CSS hack,非常简单也容易管理，+号用于区分IE系列浏览器与其他浏览器。使用方法如下：

1
2
3
4

#content{
width:500px;
+width:480px; /*IE可执行*/
}

在相同的属性设置下，带有+号的属性只能在IE下运行，包括IE5,IE6和IE7,这样我们就可以通过这种方式去区分对待IE系列浏览器与其他浏览器。

CSS中position的absolute和relative

之前老弄不明白position到底是怎么定位的，position属性其实是指本体对上级的定位。
默认的属性值都是static，静态。最关键的是relative（相对）以及absolute（绝对）。
只要把其上一级的样式属性position设置为relative就可以了。

1
2
3

<div id="A">
     <div id="B">some text here</div>
 </div>

当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。

css网站布局实录

css网站布局实录一书看完。学到了很多东西，很不错的一本书。
本书内容丰富，注重思维方法与实践应用，适合初、中级网页设计爱好者和希望使用Web标准对原有网页进行重构的专业网页设计师，是任何网站开发相关人员手中，不可缺少的资料。
书里面的代码请到作者网站上下载

作者：  李超(Allan) (http://allan.flashempire.net/blog)

CSS中float引起层飘出上级层的解决

刚学css div布局，总会遇到很多浏览器兼容的问题，这个问题困扰了一段时间，只到看了精通css才看到几个解决办法。

1.加clear空div

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
.clearfix {
	display: block;
	margin: 0px;
	clear: both;
	padding: 0px;
	visibility: hidden;
	background-color:#666666;
	border:0px none #FFFFFF;
}
.clearfix:after {
	height: 1px;
}

使用方法：
在所有浮动层之后加上这个层

1

<div class="clearfix"></div>

2.把背景层加浮动，但是这个方法会影响其他的div，有时候好用。
3.加 overlow 这个也有问题，会影响div的外观。

div最小高度

IE6中的div默认有个最小字体高度，div的最小高度就是这个高度，除非你改变这个字体的大小。这样来加：

1

.style1{height:1px;font-size:0;}

刚开始div+css总会遇到很多类似这样的问题…