今天的样式调的纠结,一会这边一会那么把jquery博客折腾的头大,浏览器兼容性。晚上闲着收集一些常见IE6中的BUG

3像素问题及解决办法

当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高。

当子元素浮动且未知高度时,怎么使父容器适应子元素的高度?

这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性,overflow:auto;是让父容器来自适应内部容器的高度,zoom:1;是为了兼容 IE6而使用的CSS HACK。zoom:1;通不过W3C的验证,这也是遗憾的一点,幸好IE支持<!–[if IE]>这种写法,可以专门针对IE来写单独的样式,所以可以把这个属性写在页面内的<!–[if IE]>中,这样应该可以通过验证了。

IE6双倍边距bug

当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况。如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug。

超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}

IE6下这两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

IE6文字溢出BUG
说明:注释造成文字溢出是IE的BUG。

一个空格引发CSS失效
这段代码对<p>的首字符样式定义在IE6上看是没有效果的(IE7没测试),而在p:first-letter和{font- size:300%}加上空格,也就是p:first-letter {font-size:300%}后,显示就正常了。但是同样的代码,在FireFox下看是正常的。按道理说,p:first- letter{font-size:300%}的写法是没错的。那么问题出在哪里呢?答案是伪类中的连字符”-”。IE有个BUG,在处理伪类时,如果伪 类的名称中带有连字符”-”,伪类名称后面就得跟一个空格,不然样式的定义就无效。而在FF中,加不加空格都可以正常处理。

IE6中奇数宽高的BUG
IE6还有奇数宽高的bug,解决方案就是将外部相对定位的div宽度改成偶数。

IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多,可以是改变html的排版,或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零,font-size:0

ie6下空标签高度问题
一个空div如果高度设置为0到19px,IE6下高度默认始终19PX。
例如:
.c{background-color:#f00;height:0px;/*给定任何小于20px的高度 */}
<div class=”c”></div>

如果不让它默认为19PX。而是0PX的话
解决方法有3种:
1.css里面加上overflow:hidden;
2.div里面加上注释,
<div class=”c”><!– –></div>
3.css里面加上line-height:0;然后div里面加上#nbsp;,
<div class=”c”>&nbsp;</div>(#换成&)

修正重复文字bug

复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:

确保所有的元素使用”display:inline;”
在最后一个元素上使用一个”margin-right:-3px;”
# 为浮动元素的最后一个条目使用一个条件注释,比如:
<!–[if !IE]>Put your commentary in here…<![endif]–>
在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

jquery博客收集的IE6中CSS常见BUG全集及解决方案的更多相关文章

  1. IE6中CSS常见BUG全集及解决方案——摘自网友

    IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...

  2. IE6中的常见BUG与相应的解决办法

    开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,它不支持PNG alpha通道暂且不论.其文档的解析理解规范也引起了诸多恼人的BUG,有时甚至让人感到绝望.本文主要讲解一些比较容易遇到的IE ...

  3. IE6下CSS常见兼容性问题及解决方案

    1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:h ...

  4. IE6下css常见bug处理

    1.双倍边距 如下图所示,一个样式里面既设定了“float:left:”又有“margin-left:100px:”的情况,就呈现了双倍情况.如外边距设置为100px, 而左侧则呈现出200px,解决 ...

  5. IE6的那些css常见bug(汇总)

    IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...

  6. 【IE6的疯狂之二】IE6中PNG Alpha透明(全集)

    ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明. 很多人说IE6不支持PNG透明,其实IE支持100%透明的PNG ...

  7. .net mvc页面UI之Jquery博客日历控件

    摘要:最近在做一个博客系统,其他需要用到博客日历控件,网上搜索了很多资料,其中大部分都是javascript的,经过总结使用jquery实现了博客日历效果.代码如下: 原文链接转载请注明:http:/ ...

  8. 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...

  9. iOS-大神们的博客收集

    唐巧的技术博客 http://blog.devtang.comOneV's Den http://onevcat.com破船之家 http://beyondvincent.comNSHipster h ...

随机推荐

  1. T4模板在项目中的使用

    建立T4模板方法:右键添加新项->文本模板 使用T4模板生成Dal层代码如下: <#@ template language="C#" debug="false ...

  2. Intelli IDEA 14.04开发版+注册码

    Idea,一款比较出色的IDE开发工具,懂她的人,自然懂得. 本版本-14.04+注册码 注册界面  注册码:               Name:happy                KEY: ...

  3. 2016 版 Laravel 系列入门教程(三)【最适合中国人的 Laravel 教程】

    本教程示例代码见: https://github.com/johnlui/Learn-Laravel-5 在任何地方卡住,最快的办法就是去看示例代码. 在本篇文章中,我们将尝试构建一个带后台的简单博客 ...

  4. ajax使用post提交中文

    Ajax使用POST提交中文乱码问题 前段时间写JSP,使用AJAX以POST方式提交数据,如果是中文字符提交就会乱码,后来写ASP时用到AJAX以POST方式提交数据,中文一样是乱码.搜索一下相关资 ...

  5. 【转】变量的声明和定义,从C到编译原理到C++,再到Java

    基础学了太久,时间一长有些东西就可能记得不太清楚,俗话说得好,"好记性不如烂笔头",所以把基础中的基础-变量的声明和定义,从C到编译原理到C++,再到Java用烂笔头记录下来 最早 ...

  6. Statement,PreparedStatement和CallableStatement的联系和区别

    联系: CallableStatement继承自PreparedSatement,PreparedStatement继承自Statement. 区别: 1:Statement 每次执行sql语句,数据 ...

  7. BZOJ1816 [Cqoi2010]扑克牌

    Description 你有n种牌,第i种牌的数目为ci.另外有一种特殊的 牌:joker,它的数目是m.你可以用每种牌各一张来组成一套牌,也可以用一张joker和除了某一种牌以外的其他牌各一张组成1 ...

  8. BZOJ2120 数颜色

    Description 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成 一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同 ...

  9. TYVJ1000 A+B problem [存个高精模板]

    A+B Problem! 通过模拟我故乡非洲的计算方式,我们很快可以解决这道题. #include<iostream> #include<cstdio> #include< ...

  10. hihocoder #1034 毁灭者问题

    传送门 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在 Warcraft III 之冰封王座中,毁灭者是不死族打三本后期时的一个魔法飞行单位. 毁灭者的核心技能之一, ...