网页设计如何解决兼容性问题

网页设计如何解决兼容性问题 网页〔制定〕如何解决兼容性问题 firefox 下 div 容器定义 height 后，div 不会因为内容超出height 而撑大，而 i6e 下是会被内容撑大，高度限定失效。所以不要轻易给容器定义 height。下面介绍网页制定如何解决兼容性问题，希望对您有所帮助。 1. 文字大小不兼容 同样 14px 的宋体字，ie 下实际占高 16px，下留白3px，firefox 下实际占高 17px，上留白 1px，下留白 3px。 文字大小不兼容解决方案： 给所有文字设定通用 line-height 值 2.div 高度不兼容 firefox 下 div 容器定义 height 后，div 不会因为内容超出height 而撑大，而 i6e 下是会被内容撑大，高度限定失效。所以不要轻易给容器定义 height。 div 高度不兼容解决方案：假如设置高度，必须要同时把内容物高度限定，也就是溢出隐藏处理：overflow:hidden;或者当必须要随着内容自适应高度，但又想 div 有一个最小的高度时候，像这样做 min-height: 1400px;max-height:none;_height: 1400px; 3.div 宽度不兼容 假如 div 容器设定 float 浮动但没设定宽度，那么也会出现ie6 和 firefox 的不兼容。firefox 下内容会撑开容器渗入它前面的 div，ie6 下该 div 内容折行而不是我们想象的与同级 div在同一行。 div 宽度不兼容解决方案：浮动 div 容器一般必须定义width。 4.div 浮动不兼容 当前面 div 有左浮动和右浮动，下面 div 就会受他们影响也有浮动。ie 或许不用加清除，但 firefox 下不清除浮动是不行的。 div 浮动不兼容解决方案：给下面的 div 设定清除 clear:both; 5. double-margin 不兼容 ie6 下给浮动容器定义 margin-left 或者 margin-right 实际效果是数值的 2 倍。 解决方案：给浮动容器定义 display:inline。 6. mirror margin 不兼容 当外层元素内有 float 元素时，外层元素如定义 margin-top:14px，将自动生成 margin-bottom:14px.padding 也会出现类似问题，都是 ie6 下的特产，该类 bug 出现的状况较为复杂，远不只这一种出现条件，还没系统整理。引申：ff 和 ie 下对容器的 margin-bottom，padding-bottom 的解释有时不一致，似乎与之相关。 解决方案：外层元素设定 border 或设定 float。 7.吞吃现象 还是 ie6，上下两个 div，上面 div 设置背景，却发现下面没有设置背景的 div 也有了背景，这就是吞吃现象。...