ERIC岛

ERIC的技术博客...
    <<  关于CSS在浏览器中固定定位position:fixed的应用 | 首页 | 【转】写给新手:如何上手3dsMax?  >>
  • 支持IE6的position:fixed 纯CSS 多浏览器兼容

    日期:2009-06-23 | 分类:互联网

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://ericneo.blogbus.com/logs/41401853.html

    position:fixed是让某个元素固定浮动在浏览器的某处,但这个属性IE6支持部完整。

    这里有个支持IE6的方法,DEMO如下:

    <!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>IE6 position:fixed bug</title>
    <style>
    * {
     padding:0;
     margin:0;
    }
    #rightform {
     text-align:center;
     padding:50px;
     font:14px/22px Georgia, "Times New Roman", Times, serif;
     height:1200px;
     background:#ffc;
    }
    #rightform h1 {
     font-family:arial;
     background:#e8edef;
     height:300px;
     line-height:300px;
     margin-bottom:200px;
    }
    #rightform p {
     line-height:1.5em;
     background:#ffdfff;
     padding:90px 0;
    }
    #rightform form {
     background-color:#ddd;
     padding:10px 20px;
     border:1px solid #aaa;
     position:fixed;
     right:30px;
     top:120px;
    }
    </style>
    <!--[if IE 6]>
    <style type="text/css">
     html{overflow:hidden;}
     body{height:100%;overflow:auto;}
     #rightform form{position:absolute;}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="rightform">
      <h2>
      <a href="" title="IE6 position:fixed bug" rel="bookmark">IE6 position:fixed bug</a>
      </h2>
      <p>position:fixed; vs position:absolute;<br /></p>
      <form id="g_search" method="get" action="#">
        <input id="g_s" name="g_s" type="text" value=""  />
        <input id="g_submit" name="g_submit" type="button" value="search" />
      </form>
      <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
    </body>
    </html>


    历史上的今天:

    关于CSS在浏览器中固定定位position:fixed的应用 2009-06-23
    ie6 img边缘空白 2009-06-23

    随机文章:

    【IE6 BUG大全】position:fixed在IE6下的实现 2009-06-30
    ie6 img边缘空白 2009-06-23
    用css控制div内链接在新窗口打开 2009-07-02
    Dreamweaver出现"在onLoad运行***,发生了一个JavaScript错误"问题的解决 2009-06-19
    清除浮动(闭合浮动元素)的方法总结与选择 2009-05-30

    收藏到:Del.icio.us




    Tags:IE6 fixed 浏览器兼容
    ERIC 发表于14:20:21 | 编辑 | 继续话题 | 转发 | 分享 0
    引用地址:

Subscribe to feed

Subscribe to feed

日历

  • RSS 什么是RSS?
    用IM提醒我内容更新
    订阅到QQ邮箱
    订阅到鲜果阅读器
    订阅到Google阅读器
    订阅到抓虾阅读器
  • 《城客》第四期:创意之城
    博客大巴
    博客大巴使用指南
    博客大巴模板中心
    免费注册博客大巴
    一键博客搬家工具
    中文互动杂志城客
^ 返回顶部
Copyright © 2002-2009 BlogBus.com, All Rights Reserved. 博客大巴 版权所有
博客大巴模板设计:Climbing | 作者:Shiney
    iCity YOHOcity