IE6实现positon:fixed

HTML代码：

<div id="userPanel">
 <h2>user panel</h2>
 <ul>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
  <li><a href="#">list item</a></li>
 </ul>
</div>

<div id="wrap">
 <div id="content">
  <div class="text">
   <p> text </p>
   <p> text </p>
   <p> text </p>
   <p> text </p>
  </div>
 </div>
</div>

CSS代码：

#userPanel {
 width: 160px;
 padding: 10px;
 background-color: #EEE;
 position: fixed;
 top: 50px;
 left: 25px;
}


#top {
 padding: 5px 15px;
 background-color: #ffffbb;
 position: fixed;
 right: 0;
 bottom: 0;
}

#content {
 width: 550px;
 margin-left: 220px;
 background-color: #eee;
}

.text {
 height: 1000px;
}

/* IE 6 only
------------------------------------- */
* html, * html body {
 /overflow: auto;
 width: 100%;*/
 height: 100%;
}

* html #wrap {
 height: 100%;
 width: 100%;
 overflow: auto;
 overflow-y: scroll;
 position: relative;
}

* html #userPanel {
 position: absolute;
}

*html #top {
 position: absolute;
 right: 16px;
}

demo预览

解决IE6渲染BUG

js操作DOM，有时候在IE6下简直就是噩梦，不渲染的解决方法通常都是zoom强制IE渲染来解决：

javascript代码：

document.body.style.zoom = 1.1;
document.body.style.zoom = '';

以上代码事实上是迫使body在IE下重新执行CSS渲染，简单点理解——IE6碰到zoom值发生变化，就一定会重新渲染。事实上我经常用zoom来解决IE6下CSS渲染问题，如果容器出现怪异，加上zoom: 100%，IE6就乖乖的驯服。做个demo下载(下载的文件请加上后缀.html)

HTML、CSS设计应该注意的细节

细节容易忽视，但是却很容易影响视觉美感，或者影响用户的体验，在使用HTML、CSS设计页面时，下面这些细节一定要注意到：

1. body中定义中文字体，一定使用中文用户最普遍的字体，宋体一定不小于12像素，否则都会让用户阅读时视觉疲劳，当然也影响美观。关于字体size，建议使用em作为单位。
2. 如果列表条目链接有截断完整句子，那么在链接一定记得在title内留下完整的信息。
3. H1标签使用千万小心，公用的head区域不使用H1标签，否则所有使用了公用head的页面H1标题一样，这样不利用SEO。
4. 编码，这是老问题了，有时候切换不同的IDE编辑文件，更要注意。
5. a链接请与普通文本区分开来，如果a:link状态是无下划线状态，那么请把a:hover状态加上下划线，链接就是链接。

暂时想到这么多，以后慢慢补充。doubanclaimad330bed027d67fc

[转]scrollLeft,scrollWidth,clientWidth等详解

• scrollHeight: 获取对象的滚动高度。
• scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
• scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
• scrollWidth:获取对象的滚动宽度
• offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
• offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
• offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
• event.clientX 相对文档的水平座标
• event.clientY 相对文档的垂直座标
• event.offsetX 相对容器的水平坐标
• event.offsetY 相对容器的垂直坐标
• document.documentElement.scrollTop 垂直方向滚动的值
• event.clientX+document.documentElement.scrollTop相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中，FireFox差异如下：

IE6.0、FF1.06+：

• clientWidth = width + padding
• clientHeight = height + padding
• offsetWidth = width + padding + border
• offsetHeight = height + padding + border

IE5.0/5.5：

• clientWidth = width - border
• clientHeight = height - border
• offsetWidth = width
• offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

doubanclaimad330bed027d67fc

用隐藏的iframe提交表单

AJAX无法上传文件是很头疼的事情，不过我们可以用隐藏在页面上的iframe提交，这里讨论的是用iframe提交表单之后，如果获取返回数据。

HTML代码片断：

form method="post" action="upload_file" target="hiddenFrame">

form的target指向iframe，通过iframe提交表单

Javascript代码：

function uploadFile() {
  $('hiddenFrame').onreadystatechange = $('hiddenFrame').onload = function() {
      if(this.readyState && this.readyState!= 'complete') {return;} //readyState判断iframe内容是否改变

      //获取iframe dom
      var frameBody = top.frames[0];
      if(!frameBody) return;
      frameBody = frameBody.document;
      if(!frameBody) return;        
      frameBody = frameBody.getElementsByTagName('body');
      if(!frameBody) return;
      frameBody = frameBody[0];
      if (!frameBody) return;
  }
}

以上代码是通过DOM获取iframe的body下返回的数据，数据可以是文本，也可以是JSON格式，如果是JSON格式，就需要evel()来解释。这种方法是在页面上写静态的iframe，复杂一点可以在页面上用JS创建iframe，不过考虑到可用性，建议还是在页面上写静态的iframe。

封装鼠标跟随tips

刚学习prototype.js的时候写的一个鼠标跟随提示的代码，后来在项目中发现一个很严重的问题，暂时没有修正。代码基于prototype.js v1.6。

代码打包下载

Javascript代码:

function handleTips(idElement) {
    this.handleBtn = (typeof idElement == 'string')? $(idElement) : idElement;
    this.popuptips = (typeof idElement == 'string')? $(idElement + "-tips") : idElement.id + "tips";
   
    this.handleBtn.onmouseover = this.showTips.bind(this);
    this.handleBtn.onmouseout = this.hiddenTips.bind(this);
    this.handleBtn.onmousemove = this.cursorPosition.bind(this);
}

handleTips.prototype.showTips = function() {
 //debugger;
 Element.show(this.popuptips);
 this.cursorPosition(arguments[0]);
}

handleTips.prototype.hiddenTips = function() {
        Element.hide(this.popuptips);
}

handleTips.prototype.cursorPosition = function(){
 
    var event = arguments[0] || window.event;
    this.arrPageSize = getPageSize();
    this.pageWidth = this.arrPageSize.PageWidth;
    this.pageHeight = this.arrPageSize.PageHeight;

   
    this.leftSpace = Event.pointerX(event) + 20;
    this.topSpace = Event.pointerY(event) + 20;

    this.rightSpace = this.pageWidth - this.leftSpace;
    this.bottomSpace = this.pageHeight - this.topSpace;
   
    this.tipsWidth = this.popuptips.getWidth();
    this.tipsHeight = this.popuptips.getHeight();

   
    if (this.tipsWidth < this.rightSpace && this.tipsHeight < this.bottomSpace) {
        this.popuptips.setStyle({
            left: Event.pointerX(event) + 20 + "px",
            top: Event.pointerY(event) + 20 + "px"
        });
    } else if(this.tipsWidth > this.rightSpace && this.tipsHeight < this.bottomSpace) {
        this.popuptips.setStyle({
            left: Event.pointerX(event) - this.tipsWidth - 20 + "px",
            top: Event.pointerY(event) + 20 + "px"
        });
    } else if(this.tipsWidth < this.rightSpace && this.tipsHeight > this.bottomSpace) {
        this.popuptips.setStyle({
            left: Event.pointerX(event) + 20 + "px",
            top: Event.pointerY(event) - this.tipsHeight - 20 + "px"
        });
    } else if(this.tipsWidth > this.rightSpace && this.tipsHeight > this.bottomSpace) {
        this.popuptips.setStyle({
            left: Event.pointerX(event) - this.tipsWidth - 20 + "px",
            top: Event.pointerY(event) - this.tipsHeight - 20 + "px"
        });
    }
}


function getPageSize() {
    var scrW, scrH;
    if(window.innerHeight && window.scrollMaxY) {
        // Mozilla
        scrW = window.innerWidth + window.scrollMaxX;
        scrH = window.innerHeight + window.scrollMaxY;
    } else if(document.body.scrollHeight > document.body.offsetHeight){
        // all but IE Mac
        scrW = document.body.scrollWidth;
        scrH = document.body.scrollHeight;
    } else if(document.body) {
        // IE Mac
        scrW = document.body.offsetWidth;
        scrH = document.body.offsetHeight;
    }
   
    var winW, winH;
    if(window.innerHeight) {
        // all except IE
        winW = window.innerWidth;
        winH = window.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        // IE 6 Strict Mode
        winW = document.documentElement.clientWidth;
        winH = document.documentElement.clientHeight;
    } else if (document.body) { // other
        winW = document.body.clientWidth;
        winH = document.body.clientHeight;
    }
   
    // for small pages with total size less then the viewport
    var pageW = (scrW < winW) ? winW : scrW;
    var pageH = (scrH < winH) ? winH : scrH;
   
    return {PageWidth:pageW, PageHeight:pageH, WinWidth:winW, WinHeight:winH};
}

Event.observe(window, 'load', function() {new handleTips('note')});

CSS代码:

.tips {
    position: absolute;
    z-index: 9999;
    padding: 5px;
    background-color: #FFFFFF;
    border: 1px solid #FF6600;
}

#note {
 margin: 100px 0 0 300px;
}

#note-tips {
 width: 120px;
}