xiaotongeye
- 浏览: 19650 次
- 性别:
- 来自: 北京
-
最新评论
1. 就是 ie6 双倍边距的问题，在使用了 float 的情况下，不管是向左还是向右都会出现双 倍，最简单的解决方法就是用 display:inline;加到 css 里面去。
2. 文字本身的大小不兼容。同样是 font-size:14px 的宋体文字，在不同浏览器下占的空间是不一样的，ie 下实际占高 16px，下留白 3px，ff 下实际占高 17px，上留白 1px，下 留白 3px，opera 下就更不一样了。解决方案:给文字设定 line-height 。确保所有文字 都有默认的 line-height 值。这点很重要，在高度上我们不能容忍 1px 的差异。
3. ff 下容器高度限定，即容器定义了 height 之后，容器边框的外形就确定了，不会被内容撑大，而 ie 下是会被内容撑大，高度限定失效。所以不要轻易给容器定义 height。
4. 还讨论内容撑破容器问题，横向上的。如果 float 容器未定义宽度，ff 下内容会尽可能 撑开容器宽度，ie 下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义 width。
5. 浮动的清除，ff 下不清除浮动是不行的。
6. mirrormargin bug，当外层元素内有 float 元素时，外层元素如定义 margin-top:14px， 将自动生成 margin-bottom:14px。padding 也会出现类似问题，都是 ie6 下的特产，该 类 bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案:外层元素设定 border 或 设定 float。
7. 吞吃现象，限于篇幅，我就不展开了。还是 ie6，上下两个 div，上面的 div 设置背景， 却发现下面没有设置背景的 div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象， 还有滚动下边框缺失的现象。解决方案:使用 zoom:1。这个 zoom 好象是专门为解决 ie6 bug 而生的。
8. 注释也能产生 bug~~~“多出来的一只猪。”这是前人总结这个 bug 使用的文案，ie6 的这个 bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决 方案:用“<!–-[if !IE]><!--> picRotate start <!--<![endif]-->”方法写注释。
9. <li/>里加 float <div/>，这是一个典型的，棘手的兼容问题，希望引起大 家正视 ，给 li 不同的属性会有不同的解释效果，ff 下的解释稍可理解，ie6 下的解释会让 你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在《ul 使用心得》一文 里有相关成果，却没给出问题解决的过程。
10. img 下的留白。解决方案:给img设定 display:block。
11. 失去 line-height。<div style=”line-height:20px”><img />文字 </div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个 inline-block 元素和 inline 元素写在一起了。解决方案:让 img 和文字都 float 起来。
12. 链接的 hover 状态。a:hover img{width:300px} 我们想让鼠标 hover 时，链接 里包含的图片宽度变化，可惜在 ie6 下无效，ie7、ff 下有效。
13. 非链接的 hover 状态。div:hover{} 这样的样式 ie6 是不认的，在 ie7、ff 下才有效 果。
14. ie 下 overflow:hidden 对其下的绝对层 position:absolute 或者相对层 position:relative 无效。解决方案:给 overflow:hidden 加 position:relative 或者 position:absolute。另，ie6 支持 overflow-x 或者 overflow-y 的特性，ie7、ff 不支持。
15. ie6 下严重的 bug，float 元素如没定义宽度，内部如有 div 定义了 height 或 zoom:1， 这个 div 就会占满一整行，即使你给了宽度。float 元素如果作为布局用或复杂的容器，都 要给个宽度的。
16. ie6 下的 bug，绝对定位的 div 下包含相对定位的 div，如果给内层相对定位的 div 高 度 height 具体值，内层相对层将具有 100%的 width 值，外层绝对层将被撑大。解决方案给内层相对层 float 属性。
17. ie6 下的 bug，<head></head>内有<base target=”_blank”/> 的情况下，position:relative 层下的 float 层内文字无法选中。
18. 终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width 值，忽视浮动层的影响，ff 下搜索至浮动层结束，如此，只能给中间的所有浮动层加 width:100%才行，累啊。opera 这点倒学乖了跟了 ie。
2. 文字本身的大小不兼容。同样是 font-size:14px 的宋体文字，在不同浏览器下占的空间是不一样的，ie 下实际占高 16px，下留白 3px，ff 下实际占高 17px，上留白 1px，下 留白 3px，opera 下就更不一样了。解决方案:给文字设定 line-height 。确保所有文字 都有默认的 line-height 值。这点很重要，在高度上我们不能容忍 1px 的差异。
3. ff 下容器高度限定，即容器定义了 height 之后，容器边框的外形就确定了，不会被内容撑大，而 ie 下是会被内容撑大，高度限定失效。所以不要轻易给容器定义 height。
4. 还讨论内容撑破容器问题，横向上的。如果 float 容器未定义宽度，ff 下内容会尽可能 撑开容器宽度，ie 下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义 width。
5. 浮动的清除，ff 下不清除浮动是不行的。
6. mirrormargin bug，当外层元素内有 float 元素时，外层元素如定义 margin-top:14px， 将自动生成 margin-bottom:14px。padding 也会出现类似问题，都是 ie6 下的特产，该 类 bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案:外层元素设定 border 或 设定 float。
7. 吞吃现象，限于篇幅，我就不展开了。还是 ie6，上下两个 div，上面的 div 设置背景， 却发现下面没有设置背景的 div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象， 还有滚动下边框缺失的现象。解决方案:使用 zoom:1。这个 zoom 好象是专门为解决 ie6 bug 而生的。
8. 注释也能产生 bug~~~“多出来的一只猪。”这是前人总结这个 bug 使用的文案，ie6 的这个 bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决 方案:用“<!–-[if !IE]><!--> picRotate start <!--<![endif]-->”方法写注释。
9. <li/>里加 float <div/>，这是一个典型的，棘手的兼容问题，希望引起大 家正视 ，给 li 不同的属性会有不同的解释效果，ff 下的解释稍可理解，ie6 下的解释会让 你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在《ul 使用心得》一文 里有相关成果，却没给出问题解决的过程。
10. img 下的留白。解决方案:给img设定 display:block。
11. 失去 line-height。<div style=”line-height:20px”><img />文字 </div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个 inline-block 元素和 inline 元素写在一起了。解决方案:让 img 和文字都 float 起来。
12. 链接的 hover 状态。a:hover img{width:300px} 我们想让鼠标 hover 时，链接 里包含的图片宽度变化，可惜在 ie6 下无效，ie7、ff 下有效。
13. 非链接的 hover 状态。div:hover{} 这样的样式 ie6 是不认的，在 ie7、ff 下才有效 果。
14. ie 下 overflow:hidden 对其下的绝对层 position:absolute 或者相对层 position:relative 无效。解决方案:给 overflow:hidden 加 position:relative 或者 position:absolute。另，ie6 支持 overflow-x 或者 overflow-y 的特性，ie7、ff 不支持。
15. ie6 下严重的 bug，float 元素如没定义宽度，内部如有 div 定义了 height 或 zoom:1， 这个 div 就会占满一整行，即使你给了宽度。float 元素如果作为布局用或复杂的容器，都 要给个宽度的。
16. ie6 下的 bug，绝对定位的 div 下包含相对定位的 div，如果给内层相对定位的 div 高 度 height 具体值，内层相对层将具有 100%的 width 值，外层绝对层将被撑大。解决方案给内层相对层 float 属性。
17. ie6 下的 bug，<head></head>内有<base target=”_blank”/> 的情况下，position:relative 层下的 float 层内文字无法选中。
18. 终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width 值，忽视浮动层的影响，ff 下搜索至浮动层结束，如此，只能给中间的所有浮动层加 width:100%才行，累啊。opera 这点倒学乖了跟了 ie。
分享到：
发表评论
-
css
2018-02-23 11:06 4561.#nav li {} 看起来很快，实际上很慢，尽管这让人 ... -
web标准
2018-02-22 14:25 420web标准简单来说可以分为结构、表现和行为。其中结构主要是有H ... -
总结一些每次写都要百度的样式 and so on
2016-06-03 14:00 499本次总结无关乎顺序， ... -
js检测css样式的兼容问题
2015-07-24 20:30 872<script> ... -
canvas画布基础
2015-07-10 20:47 474canvas是个神奇的标签，开始学习之后就停不下来，这两天一直 ... -
PHP正则表达式
2015-07-07 14:34 466正则表达式的基本语法 ... -
PHP字符串与数组常用函数
2015-07-07 10:42 2006字符串： 字符串的连接：PHP中用英文的点号.来连接两个字符串 ... -
DOM事件对象event、IE中的事件对象
2015-07-02 16:45 530DOM中的事件对象： type属性用于获取事件类型； targ ... -
跨浏览器事件处理程序
2015-07-02 16:03 503<div id = "box"& ... -
jQuery获取父级元素、同级元素、子元素、过滤
2015-07-01 15:50 521父级元素： <body>body (曾曾祖父) ... -
点击按钮实现轮播切换
2015-06-29 19:13 1018HTML： <div class="con3 ... -
jQuery验证邮箱手机
2015-06-29 19:03 546验证邮箱： function checkSignEmail ... -
ios多线程
2014-11-27 14:35 482最近写了一个东西需要加载网络上的图片，运行的时候一直卡到一个界 ... -
取出数组中的值
2014-11-01 21:08 335在写程序的时候，遇到一个问题，想把数组[a，b]中的a，b添加 ... -
解析json获取数据
2014-11-01 20:57 426NSError *error; NSURLReq ... -
cell重用问题
2014-11-01 20:44 607解决问题之前，在cell上添加了label，但是给label添 ... -
保存并获取数据
2014-09-27 19:38 327在IOS开发过程中，经常会遇到数据保存的问题，现在主要说一下用 ... -
UINavigationController实现页面跳转
2014-09-19 20:31 812总结一下利用navigationController push ... -
tableviewcell添加label、button
2014-09-13 22:02 16661.给tableviewcell添加label，首先 CG ... -
简单表视图并实现添加数据
2014-09-10 19:21 13521.基础：表用于显示数据列表。数据列表中的每项都由行表示。表视 ...
相关推荐
### 浏览器的CSS兼容问题详解 在Web开发领域，浏览器兼容性一直是开发者们头疼的问题，尤其是在处理CSS样式时。不同的浏览器内核对CSS的支持程度、解析方式以及渲染效果存在差异，这使得同一段代码在不同浏览器下...
### IE与FF的CSS兼容问题大集合 在前端开发中，不同浏览器对于CSS的支持程度不同，这往往会导致页面在不同的浏览器下显示效果不一致。本文将详细介绍Internet Explorer（IE）和Firefox（FF）两种浏览器之间常见的...
### CSS兼容问题的解决方案 #### 一、概述 在网页设计与开发过程中，开发者经常会遇到不同浏览器对于CSS的支持程度不一的问题，导致页面在不同浏览器中的显示效果出现差异。为了确保网页能够在各种浏览器中正常...
### IE与Firefox的CSS兼容问题：web2.0经验总结 在Web开发中，确保不同浏览器之间的CSS兼容性是一项挑战性的任务，尤其是在处理Internet Explorer（IE）与Firefox这两种具有显著差异的浏览器时。本文将深入探讨IE与...
html编写中存在div+css兼容问题，该文档阐述了网页编写的兼容性问题
十二、IE与Firefox的CSS兼容问题 1. 字体渲染：IE可能对某些字体有不同解析，可以使用`font-family`指定多种字体作为备选。 2. 盒模型差异：IE6和7使用不同的盒模型，可以通过`box-sizing`属性或`*{box-sizing:...
### 各种浏览器的CSS兼容问题 在网页开发过程中，我们经常会遇到不同浏览器对CSS的支持程度不一的问题，这使得同样的CSS代码在不同的浏览器中可能会呈现出不同的效果。本文将详细介绍几种主流浏览器（IE、Firefox、...
解决CSS兼容性问题的两种常见方法是： 1. 使用`!important`标记：在CSS中，`!important`可以强制应用某个样式，但这可能导致优先级混乱。例如： ```css #wrapper { width: 100px !important; /* IE7+FF */ ...
在网页设计领域，CSS（Cascading ...总的来说，处理CSS兼容性问题需要对各种浏览器的特性有深入理解，并掌握一定的技巧和工具。通过学习和实践，我们可以更好地应对这些挑战，创建出在多种浏览器下都能完美展现的网页。
CSS 在不同浏览器中的兼容问题 CSS 在不同浏览器中的兼容问题是 web 开发中的一大挑战。不同的浏览器对 CSS 的解析和渲染方式存在差异，从而导致相同的 CSS 代码在不同浏览器中显示效果不同。本文将总结常见的 CSS ...
本文将对主流浏览器，特别是Chrome、Firefox、Internet Explorer（简称IE）8、9、11以及360浏览器中的CSS兼容问题进行梳理，并提供一些解决办法。 首先，关于IE浏览器的CSS兼容问题。IE7以下版本已逐渐淡出市场，...
浏览器兼容常见问题css兼容 css兼容 浏览器兼容 IE6789兼容
这个资源“最全的CSS浏览器兼容问题”显然是一个非常实用的文档，它详细列举了在开发过程中可能遇到的各种CSS兼容问题及其解决方案，旨在帮助开发者更好地处理跨浏览器的样式问题。 首先，我们需要理解浏览器兼容性...
CSS兼容问题一直是前端开发者在网页设计和开发中遇到的常见难题之一。随着互联网技术的发展，浏览器种类和版本不断更新，各个浏览器对CSS的解析也存在差异，这就造成了不同浏览器间显示效果的不一致。为了解决这些...
CSS兼容问题是指不同的浏览器在解析和呈现CSS样式时存在差异，导致相同代码在不同浏览器上显示效果不一致。这个问题的出现主要是因为各个浏览器厂商对CSS规范的实现不尽相同，有的浏览器可能完全遵循W3C标准，有的则...
【CSS兼容问题详解：Firefox与IE的差异】 在网页开发中，CSS（层叠样式表）是用于控制页面布局和样式的工具。然而，不同浏览器对CSS的解析方式可能存在差异，尤其是在Firefox和Internet Explorer（IE）之间。这些...
important`解决Firefox和IE浏览器在处理`min-height`及`padding`、`border`导致的CSS兼容问题。 首先，让我们关注`min-height`属性。`min-height`用于设定元素的最小高度，当内容较多时，元素高度会自动扩展以适应...
以下是一些解决这些浏览器间CSS兼容问题的方法： 1. **DOCTYPE声明**：DOCTYPE声明会影响浏览器的呈现模式。在HTML文档开头使用正确的DOCTYPE声明，如`<!DOCTYPE html>`，可以确保浏览器以标准模式解析CSS，减少...