• 解决 ie6 下弹出框随着滚动条不断抖动


    之前写的弹出框会在ie6下不断抖动,找了很久,终于找到了解决办法:

    1.下面用纯css也实现了:(但这种办法有个缺陷,那就是:这会使页面上原有的absolute、relation都变成fixed的效果)

       滚动条实际不是视口的 而是body 模拟的

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>IE6 position:fixed bug</title>
    <style>
    *{padding:0;margin:0}
    #outbox     {height:2000px;background-color:#FFCCCC;}
    .box        {position:fixed; 100px; height:100px;top:100px; left:100px; background-color:#c50000}
    </style>
    <!--[if IE 6]>
    <style type="text/css">
    html         {overflow:hidden}
    body         {height:100%;overflow:auto}
    .box         {position:absolute;}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="outbox">111</div>
    <div class="box">固定块</div>
    </body>
    </html>

    2.用js也可以简单的实现(),但是实现后ie6下 会随着滚动条不断抖动,如何解决呢??

           出现抖动的原因:

           IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。

        解决方法:

           解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素!    background-image无需一张真实的图片,设置成about:blank就行。

        css添加下面代码:

        * html,* html body{background-image:url(about:blank);background-attachment:fixed}

        至此,解决了ie6下不断抖动问题。

        完整js代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    *                    {padding:0; margin:0;}
    * html,* html body{background-image:url(about:blank);background-attachment:fixed}
    .header              { 100%;height:50px; line-height:50px; text-align:center;background-color:#666; color:#fff; position:fixed; top:0}
    .content             { height:1500px;}
    </style>
    <script type="text/javascript" src="jquery 插件/jquery-1.8.0.js"></script>
    
    <!--[if IE 6]>
    <script>
       $(function(){
           $(window).scroll(function(){
    	      var $stop=$(this).scrollTop();
    		  $(".header").css({"position":"relative"})      //此行代码是为ie6写的
    	      $(".header").offset({top:(0+$stop),left:0});
    	   
    	   })  
       })
    </script>
    <![endif]-->
    </head>
    <body>
    <div class="header">
       jquery 练习
    </div>
    <div class="content"></div>
    </body>
    </html>


    -------------------------------------------------------------

    参考:

    http://www.cnblogs.com/hooray/archive/2011/05/20/2052269.html

    蓝色理想:http://bbs.blueidea.com/forum.php?mod=viewthread&tid=2979799

  • 相关阅读:
    遗传算法优化BP神经网络——非线性函数拟合
    BP神经网络的数据分类——语音特征信号分类
    HTML5新特性
    HTML5——FileReader详解
    javaScript构造函数显式提供返回值
    react截图组件react-cropper的使用方法
    Ant Design of React的安装和使用方法
    flex布局
    CSS常用的元素居中方法
    javaScript异步编程
  • 原文地址:https://www.cnblogs.com/hdchangchang/p/3965401.html
Copyright © 2020-2023  润新知