zoukankan      html  css  js  c++  java

  • css的各种bug集合，主要针对ie6,7会出现

    对于页面重构师来说，最令人头痛的浏览器是哪个？我相信有99%的人会选择IE6，没错就是IE6。下面我就来介绍一些我遇到过的IE6BUG以及解决方法，当然也包括其他浏览器。

    1、IE6双边距bug

    当元素浮动并且同时有外边距时，在IE6下会产生双倍距离。（.content{float:left;margin-left:10px;}其他浏览器下左边距是10px，IE6下左边距是20px）

    解决方法：display:inline;（.content{float:left;margin-left:10px;display:inline;}）

    2、奇数宽高bug

    在相对定位和绝对定位下，当外层相对定位的宽度或高度是奇数时，会产生这个bug。我们看下例子：

    复制代码
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ">  
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
 3 <head>  
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  
 5     <title>奇数宽高bug</title>  
 6     <style type="text/css">  
 7     *{margin:0;padding:0;}  
 8     .rel{width:501px;height:501px;position:relative;background:red;}  
 9     .abs{width:200px;height:100px;position:absolute;background:yellow;right:0;bottom:0;}  
10     </style>  
11 </head>  
12 <body>  
13     <div class="rel">  
14         <div class="abs"></div>  
15     </div>  
16 </body>  
17 </html>
    复制代码

    可以看出，黄色背景的div并没有完全在右下角，下边和右边各留了1像素。

    解决方法：将外层相对定位的div宽高改为偶数即可。

    3、IE6 position:fixed; 无效

    如今很多页面上都有分享的功能，我们可以发现随着浏览器的滚动，位置并没有变化，这是因为使用了position:fixed;效果，但是在IE6下并不支持这个属性。那怎么办呢？该如何实现这样的效果呢？很简单，在css中用表达式写js来实现这个效果。

    复制代码
    /*定位在左上角*/
.ie6fixedLT{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop));}

/*定位在右上角*/
.ie6fixedRT{position:absolute;right:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop));}

/*定位在左下角*/
.ie6fixedLB{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}

/*定位在右下角*/
.ie6fixedRB{position:absolute;right:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}  
   
/* 修正ie6振动bug */  
*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
    复制代码

    4、IE6高度小于10像素bug

    在IE6下有默认行高，这就使得高度小于10像素的块级元素无法显示正确的高度。

    解决方法：给高度小于10像素的元素添加 font-size:0;overflow:hidden;

    5、IE6最小高度

    在IE6中，并不认识 min- 和 max- 前缀的宽度高度。但是有时我们做页面的时候会用到，该如何解决呢？

    解决方法：

    方法一：用 js 来解决（不值得推荐）

    1 .maxWidth{max-width:200px; width:expression(this.width > 200 ? '200px' : true);}  
2 .minHeight{min-height:200px; height:expression(this.height < 200 ? '200px' : true);}

    解决 expression 性能问题

    1 .minWidth{min-width:200px; width:expression((function(o){o.style.width = (o.width < 200 ? '200px' : o.width);})(this));}

    方法二：hack写法（推荐）

    1 .minHeight{height:auto !important;height:100px;min-height:100px;}

    注意写法的顺序

    6、IE6下div无法遮盖select

    复制代码
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ">  
 2 <html xmlns="http://www.w3.org/1999/xhtml">  
 3 <head>  
 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
 5 <title>div无法遮盖select</title>  
 6 <style type="text/css">  
 7 .wrapper{position:relative;top:10px;left:26px;width:300px;height:300px;}  
 8 .box{position:absolute;top:0;left:50px;width:200px;height:200px;background:#FDF3D9;border:1px solid #EEAC53;}  
 9 </style>  
10 </head>  
11 <body>  
12 <div class="wrapper">  
13     <select name="select" id="select">  
14         <option>测试选项</option>  
15         <option>测试选项2</option>  
16         <option>测试选项3</option>  
17     </select>  
18     <div class="box"></div>  
19 </div>  
20 </body>  
21 </html>
    复制代码

    产生的原因：在IE6下，浏览器将select元素视为窗口级元素，这时div或者其他元素无论z-index设置有多高，都无法遮住select元素。

    解决方法：在需要遮盖的div中放入一个空的iframe。

    复制代码
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ">  
 2 <html xmlns="http://www.w3.org/1999/xhtml">  
 3 <head>  
 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
 5 <title>无标题文档</title>  
 6 <style type="text/css">  
 7 .wrapper{position:relative;top:10px;left:26px;width:300px;height:300px;}  
 8 .box{position:absolute;top:0;left:50px;width:200px;height:200px;background:#FDF3D9;border:1px solid #EEAC53;}  
 9 .box iframe{display:block;position:absolute;top:0;left:0;z-index:1;width:200px;height:200px;filter:alpha(opacity=1);}  
10 </style>  
11 </head>  
12 <body>  
13 <div class="wrapper">  
14 <div class="box"><!--[if lt IE 7]><iframe src="" frameborder="0"></iframe><![endif]--></div>  
15     <select name="select" id="select">  
16         <option>测试选项</option>  
17         <option>测试选项2</option>  
18         <option>测试选项3</option>  
19     </select>  
20 </div>  
21 </body>  
22 </html>
    复制代码

    7、文字溢出bug（IE6注释bug）

    形成原因：

    1、一个容器包含2个具有 float 样式的子容器，且第一个子容器为内联元素

    2、第二个容器的宽度大于父容器的宽度，或者父容器宽度减去第二个容器宽度的值小于3

    3、在第二个容器前存在注释（ie6注释bug）

    复制代码
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ">  
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
 3 <head>  
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  
 5     <title>文字溢出bug（IE6注释bug）</title>  
 6 </head>  
 7 <body>  
 8     <div style="400px;height:200px;">  
 9         <div style="float:left;background:red;"></div>  
10         <!--注释-->  
11         <div style="float:left;405px;background:#ccc;">重复文字测试</div>  
12     </div>  
13 </body>  
14 </html>
    复制代码

    解决方法：

    1、改变结构，不出现【一个容器包含2个具有float的子容器】的结构

    2、减小第二个容器的宽度，使父容器宽度减去第二个容器宽度的值大于3

    3、去掉注释（推荐）

    4、修正注释的写法。将<!--注释-->写成<!--[if !IE]>注释<![endif]-->

    5、将文字放入新的容器内（推荐）

    复制代码
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ">  
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
 3 <head>  
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  
 5     <title>文字溢出bug（IE6注释bug）</title>  
 6 </head>  
 7 <body>  
 8     <div style="400px;height:200px;">  
 9         <div style="float:left;background:red;"></div>  
10         <!--注释-->  
11         <div style="float:left;405px;background:#ccc;"><span>重复文字测试</span></div>  
12     </div>  
13 </body>  
14 </html>
    复制代码

    8、FF内部div使用margin-top，成为外部div的margin-top

    前面几个都是介绍IE6下的bug，这次介绍FF下的bug。

    解决方法：display:inline-block;或者overflow:hidden;

    复制代码
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ">  
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">  
 3 <head>  
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 5     <title>firefox内部div使用margin-top，成为外部div的margin-top</title>  
 6     <style>  
 7         .clear{clear:both;}  
 8         .a{border:1px solid red;}  
 9         .b1{width:200px;height:130px;background:yellow;}  
10         .b2{width:200px;height:130px;background:yellow;display:inline-block;overflow:hidden;}  
11         .c{width:150px;height:100px;background:green;margin-top:30px;}  
12     </style>  
13 </head>  
14 <body>  
15     <div class="a"></div>  
16     <div class="b1"><div class="c">firefox内部div使用margin-top，成为外部div的margin-top</div></div>  
17     <div class="clear"></div><br /><br />  
18     <div class="a"></div>  
19     <div class="b2"><div class="c">这下子正常了</div></div>  
20 </body>  
21 </html>
  • 相关阅读:
    学数据结构，仅仅须要主要的编程体验
    Android中的跨进程通信方法实例及特点分析(二):ContentProvider
    phpStorm打开提示 failed to create JVM 的解决的方法
    （转）Hibernate框架基础——Java对象持久化概述
    （转）版本管理工具介绍——SVN篇(二)
    （转）版本管理工具介绍——SVN篇(一)
    （转）全文检索技术学习(三)——Lucene支持中文分词
    （转）全文检索技术学习(二)——配置Lucene的开发环境
    （转）全文检索技术学习(一)——Lucene的介绍
    （转） 学习淘淘商城第一课
  • 原文地址：https://www.cnblogs.com/yangliulang/p/2767529.html
Copyright © 2011-2022 走看看