일반적인 CSS 문제 요약

首先说明下浏览器的不兼容往往是各个浏览器对于一些标准的定义不一致导致的，因此，我们可以进行一些初始化，很多问题都很轻松解决。

下面是div+css常见问题总结：

1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。

2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。

3.横向上的撑破容器问题，。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。

a.

b.

c.

d.

上面的代码在不同浏览器中是不一样的，实验起源于对小height 值div 的运用，

，小height 值要配合overflow:hidden一起使用。实验好玩而已，想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。

4.double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。 

5.mirror margin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。 padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。 

引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。

6. 吞吃现象。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。 

7.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start ”方法写注释。 

8.img 下的留白，大家看这段代码有啥问题：

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写

 

 

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。 

9. 失去line-height。

文字

，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。 

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。

10.clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效

dd

ff

11.ie 오버플로:숨김에서 절대 레이어 위치:절대 또는 상대 레이어 위치:상대가 유효하지 않습니다. 해결 방법: 오버플로:숨김에 위치: 상대 또는 위치: 절대를 추가하세요. 또한 ie6은 Overflow-x 또는 Overflow-y 기능을 지원하지만 ie7과 ff는 이를 지원하지 않습니다.

12.ie6의 심각한 버그입니다. float 요소에 너비가 정의되어 있지 않고 내부에 높이 또는 확대/축소:1을 정의하는 div가 있는 경우 div는 사용자가 지정한 경우에도 전체 행을 채웁니다. 폭이에요. float 요소가 레이아웃이나 복합 컨테이너로 사용되는 경우 너비를 지정해야 합니다.

13.ie6 미만의 버그로, 절대 위치에 있는 div에는 상대적으로 위치가 지정된 div가 포함되어 있습니다. 내부 레이어에 상대적으로 위치가 지정된 div의 높이에 특정 높이 값이 지정되면 내부 레이어의 상대 레이어는 너비 값은 100%이고 외부 레이어의 너비 값은 100%입니다. 절대 레이어는 늘어납니다. 해결책은 내부 레이어에 상대 레이어에 대한 부동 속성을 제공하는 것입니다.

14.width:100%는 IE에서 사용하기 매우 편리합니다. 플로팅 레이어의 영향을 무시하고 위쪽으로 너비 값을 검색하며, 플로팅이 끝날 때까지 ff에서 검색합니다. 이런 식으로 중간 레이어만 주어질 수 있습니다. 그냥 모든 플로팅 레이어에 width: 100% 를 추가하면 됩니다. 오페라는 이것을 잘 배웠고 따랐습니다.