- 浏览: 18575 次
- 性别:
- 来自: 北京
最新评论
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 4251.#nav li {} 看起来很快,实际上很慢,尽管这让人 ... -
web标准
2018-02-22 14:25 388web标准简单来说可以分为结构、表现和行为。其中结构主要是有H ... -
总结一些每次写都要百度的样式 and so on
2016-06-03 14:00 469本次总结无关乎顺序, ... -
js检测css样式的兼容问题
2015-07-24 20:30 842<script> ... -
canvas画布基础
2015-07-10 20:47 430canvas是个神奇的标签,开始学习之后就停不下来,这两天一直 ... -
PHP正则表达式
2015-07-07 14:34 441正则表达式的基本语法 ... -
PHP字符串与数组常用函数
2015-07-07 10:42 1970字符串: 字符串的连接:PHP中用英文的点号.来连接两个字符串 ... -
DOM事件对象event、IE中的事件对象
2015-07-02 16:45 497DOM中的事件对象: type属性用于获取事件类型; targ ... -
跨浏览器事件处理程序
2015-07-02 16:03 475<div id = "box"& ... -
jQuery获取父级元素、同级元素、子元素、过滤
2015-07-01 15:50 491父级元素: <body>body (曾曾祖父) ... -
点击按钮实现轮播切换
2015-06-29 19:13 991HTML: <div class="con3 ... -
jQuery验证邮箱手机
2015-06-29 19:03 507验证邮箱: function checkSignEmail ... -
ios多线程
2014-11-27 14:35 455最近写了一个东西需要加载网络上的图片,运行的时候一直卡到一个界 ... -
取出数组中的值
2014-11-01 21:08 311在写程序的时候,遇到一个问题,想把数组[a,b]中的a,b添加 ... -
解析json获取数据
2014-11-01 20:57 393NSError *error; NSURLReq ... -
cell重用问题
2014-11-01 20:44 570解决问题之前,在cell上添加了label,但是给label添 ... -
保存并获取数据
2014-09-27 19:38 304在IOS开发过程中,经常会遇到数据保存的问题,现在主要说一下用 ... -
UINavigationController实现页面跳转
2014-09-19 20:31 778总结一下利用navigationController push ... -
tableviewcell添加label、button
2014-09-13 22:02 15931.给tableviewcell添加label,首先 CG ... -
简单表视图并实现添加数据
2014-09-10 19:21 13221.基础:表用于显示数据列表。数据列表中的每项都由行表示。表视 ...
相关推荐
IE与FF的CSS兼容问题大集合! 解决IE和FF的纯CSS布局的兼容性问题! 简单实用!
html编写中存在div+css兼容问题,该文档阐述了网页编写的兼容性问题
IE与Firefox的CSS兼容问题 web2.0经验总结
各种游览器的css兼容问题 经过本人 测试 绝对正确
css规范_IE bug,IE与Firefox的CSS兼容问题.....整理
解决div+css常见兼容性问题,是你做网页的必备。
css兼容的各种解决方案与实例css兼容的各种解决方案与实例
本文档介绍了常见的浏览器兼容问题 主要包括css样式
CSS 对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE与Firefox的兼容性处理方法并整理了一下
这是自己毕业从事WEB开发一年以来,自己在工作中遇到的CSS兼容问题及解决办法
浏览器兼容常见问题css兼容 css兼容 浏览器兼容 IE6789兼容
最全的CSS浏览器兼容问题,解决不同版本浏览器之间的CSS兼容问题
主要帮助大家梳理主流浏览器css兼容的相关问题,对主流浏览器css兼容问题进行汇总,感兴趣的小伙伴们可以参考一下
项目碰到css兼容问题比如repeat-y有的浏览器不支持、在table里边,如果在头部定义了寬高,在td里边colspan后,宽度失效,下面为大家介绍相对的解决方法
css有关的兼容性问题大全,让你轻松快速的解决css兼容性问题。
CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题CSS在不同浏览器中兼容问题
CSS浏览器兼容问题,解决各个浏览器中css不兼容的问题。
CSS技巧汇总---div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...).pdf