zoukankan      html  css  js  c++  java

  • ie6, ie7兼容性问题以及处理办法

    1、IE6中绝对定位位置错误
    问题描述：在ie6中，如果参照物没有触发haslayout ，那么绝对定位的容器的left和bottom就会有问题。
    解决办法：在相对定位的父容器上加入 zoom:1 来触发ie的haslayout即可解决。
    小技巧：通常我们在设置一个容器为position:relative的时候 ，都会加上zoom:1来解决很多ie下的问题。

    2、IE6中绝对定位1像素偏差
    问题描述：在 IE6 下定位元素的父级宽高都为奇数时，那么在 IE6 下定位元素的 right和bottom都有1像素的偏差。
    解决办法：设为偶数。

    [html]
    1. <style>  
    2. #box1{303px; height:303px;border:1px solid black; position:relative;}  
    3. #box2{ 50px; height:50px; background:#7c1; position:absolute;right:-1px;bottom:-1px;}  
    4. </style>  
    5.   
    6. <body>  
    7. <div id="box1">  
    8.     <div id="box2"></div>  
    9. </div>  
    10. </body>  

    3、IE6浮动元素双边距bug
    问题描述：IE6下块元素有浮动和横向margin的时候，横向的margin值被放大成两倍。
    解决办法：给浮动元素加 display:inline。

    [html]
    1. <style>  
    2. body{margin:0;}  
    3. .wrap{float:left;border:2px solid #000;}  
    4. .box{100px;height:100px;background:red;margin:0 100px;float:left;display:inline; }  
    5. /*  
    6.     IE6下的双边距BUG:  
    7.     在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍  
    8.     解决办法: display:inline;  
    9. */  
    10. </style>  
    11.   
    12. <body>  
    13. <div class="wrap">  
    14. <div class="box"></div>  
    15. </div>  
    16. </body>  

    4、IE67下li底部间隙的BUG
    问题描述：在ie67下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙。
    解决办法：给li设置 float:left或者给li加vertical-align:top。

    [html] 
    1. <style>  
    2. .list{ 300px;margin:0;padding:0;}  
    3. .list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px; vertical-align:top;}  
    4. .list a{float:left;}  
    5. .list span{float:right;}  
    6. /*  
    7.     IE6，7下li的间隙  
    8.     在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙  
    9.     解决办法: 1.给li加浮动 或者 2.给li加vertical-align:top;  
    10. */  
    11. </style>  
    12.   
    13. <body>  
    14. <ul class="list">  
    15.     <li>  
    16.         <a href="#">文字文字文字文字文字</a>  
    17.         <span>作者</span>  
    18.     </li>  
    19.     <li>  
    20.         <a href="#">文字文字文字文字文字</a>  
    21.         <span>作者</span>  
    22.     </li>  
    23. </ul>  
    24. </body>  

    5、IE6下最小高度问题

    问题描述：在IE6下高度小于19px的元素，高度会被当做19px来处理。

    解决办法：设置font-size：0;

    [html]
    1. <style>  
    2. body{ margin:0;background:#000;}  
    3. .box{height:5px;background:red; font-size:0;}  
    4. /*  
    5.     在IE6下高度小于19px的元素，高度会被当做19px来处理  
    6.     解决办法:font-size:0; 或者 overflow:hidden;  
    7. */  
    8. </style>  
    9.   
    10. <body>  
    11. <div class="box"></div>  
    12. </body>  

    6、ie6 下子级的相对定位

    问题描述：ie6 下父级的overflow:hidden;是包不住子级的相对定位的。

    解决办法：父级也设为相对定位。

    [html]
    1. <style>  
    2. #box1{500px; height:300px; background:blue; overflow:hidden;position:relative;}  
    3. #box2{300px; height:500px; background:yellow; position:relative;}  
    4. </style>  
    5. </head>  
    6. <body>  
    7. <div id="box1">  
    8.     <div id="box2"></div>  
    9. </div>  
    10. </body>  

    7、在IE6下子元素margin问题

    问题描述：在IE6下父级有边框的时候，子元素的margin值消失。

    解决办法：触发父级的haslayout。

    [html] 
    1. <style>  
    2. body{margin:0;}  
    3. .box{background:blue;border:1px solid #000;zoom:1;}  
    4. .div{200px;height:200px;background:red;margin:100px;}  
    5. </style>  
    6.   
    7. <body>  
    8. <div class="box">  
    9.     <div class="div"></div>  
    10. </div>  
    11. </body>  

    8、在IE6下的文字溢出BUG

    问题描述：子元素的宽度和父级的宽度相差小于3px的时候或两个浮动元素中间有注释或者内嵌元素。

    解决办法：用div把注释或者内嵌元素用div包起来。

    [html] 
    1. <style>  
    2. .box{ 400px;}  
    3. .left{float:left;}  
    4. .right{400px;float:right;}  
    5. </style>  
    6.   
    7. <body>  
    8. <div class="box">  
    9.     <div class="left"></div>  
    10.     <div><!-- IE6下的文字溢出BUG --><span></span></div>  
    11.     <div class="right">↓leo是个大胖子</div>  
    12. </div>  
    13. </body>  

    9、绝对定位元素消失

    问题描述：当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失。

    解决办法：给定位元素外面包个div。

    [html]
    1. <style>  
    2. .box{ 200px;height:200px;border:1px solid #000; position:relative;}  
    3. span{50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}  
    4. ul{150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}  
    5. </style>  
    6.   
    7. <body>  
    8. <div class="box">  
    9.     <ul></ul>  
    10.     <span></span>  
    11. </div>  

    10、表单控件1px间隙

    问题描述：在IE6，7下输入类型的表单控件上下各有1px的间隙。

    解决办法：给input加浮动。

    [html] 
    1. <style>  
    2. .box{ 200px;height:32px;border:1px solid red;}  
    3. input{100px;height:30px;border:1px solid #000;margin:0;padding:0; float:left;}  
    4. </style>  
    5. <div class="box">  
    6.     <input type="text" />  
    7. </div>  

    11、表单控件加border:none无效

    问题描述：在IE6，7下输入类型的表单控件加border:none无效。

    解决办法：重置input的背景。

    [html] 
    1. .box{ 200px;height:32px;border:1px solid red;background:yellow;}  
    2. input{100px;height:30px;border:none;margin:0;padding:0; float:left; background:#fff;}  
    3. <div class="box">  
    4.     <input type="text" />  
    5. </div>  

    12、表单控件背景图片会移动

    问题描述：在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动。

    解决办法：把背景加给父级。

    [html]
    1. .box{ 100px;height:30px;border:1px solid red;background:yellow; background:url(ball.png) no-repeat;}  
    2. input{100px;height:30px;border:none;margin:0;padding:0; float:left; background:none;}  
    3. <div class="box">  
    4.     <input type="text" />  
    5. </div>  

    13、ie6下png

    问题描述：ie6不支持png24的图片

    [html] 
      1. <!DOCTYPE HTML>  
      2. <html>  
      3. <head>  
      4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
      5. <title>无标题文档</title>  
      6. <style>  
      7. body{ background:#000;}  
      8. .box{400px;height:400px;background:url(img/png.png);}  
      9. </style>  
      10. <!--[if IE 6]>  
      11. <script src="DD_belatedPNG_0.0.8a.js"></script>  
      12. <script>  
      13. DD_belatedPNG.fix('.box');  
      14. </script>  
      15. <![endif]-->  
      16. </head>  
      17. <body>  
      18. <div class="box"></div>  
      19. </body>  
      20. </html>  
  • 相关阅读:
    键盘事件
    冒泡事件-捕获事件-阻止事件
    Date()常用属性
    dom树节点的增删改插
    boost/c++11 变量类型打印、相等判断以及成员函数指针相关
    c++ std:call_once 与 单例模式实现
    c++11 异步编程 std::async
    c++ STL中一些常用函数/模板
    c++11 std::atomic 原子操作
    C++ std::atomic_flag 实现spinLock
  • 原文地址：https://www.cnblogs.com/liangxiaoli/p/7252853.html
Copyright © 2011-2022 走看看