Zusammenfassung häufiger CSS-Probleme

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

下面是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 Unter overflow:hidden ist die absolute Layer-Position:absolute oder relative Layer-Position:relative ungültig. Lösung: Fügen Sie position: relative oder position: absolute zu overflow:hidden hinzu. Darüber hinaus unterstützt ie6 die Funktionen overflow-x oder overflow-y, ie7 und ff jedoch nicht.

Ein schwerwiegender Fehler unter 12.ie6. Wenn für das Float-Element keine Breite definiert ist und ein Div darin vorhanden ist, das Höhe oder Zoom:1 definiert, füllt das Div die gesamte Zeile aus, auch wenn Sie angeben es eine Breite. Wenn das Float-Element für das Layout oder als komplexer Container verwendet wird, muss ihm eine Breite zugewiesen werden.

Ein Fehler unter 13.ie6, der absolut positionierte Div enthält einen relativ positionierten Div. Wenn der Höhe des relativ positionierten Div in der inneren Ebene ein bestimmter Höhenwert zugewiesen wird, wird dies der relativen Ebene in der inneren Ebene zugewiesen haben einen Breitenwert von 100 %, und die äußere Ebene hat einen Breitenwert von 100 %. Die absolute Ebene wird gestreckt. Die Lösung besteht darin, der inneren Ebene ein Float-Attribut für die relative Ebene zu geben.

14.width:100% ist sehr praktisch in der Verwendung im IE. Es sucht Schicht für Schicht nach oben, ignoriert den Einfluss der schwebenden Ebene und sucht unter ff bis zum Ende der schwebenden Ebene Auf diese Weise kann nur die mittlere Ebene angegeben werden. Fügen Sie einfach width: 100% zu allen schwebenden Ebenen hinzu, was ermüdend ist. Opera hat das gut gelernt und ist dem Beispiel gefolgt.