http://www.liupeng.us/category// WEB开发中的可用性和用户体验 Copyright (C) 2004 Security Angel Team [S4T] All Rights Reserved. SaBlog-X Version Plus 2.0 Build 20081204 Thu, 09 Feb 2012 14:37:31 +0000 30 http://www.liupeng.us/jQuery-load-use-which-method/ jQuery的load函数 Kevin jQuery的load函数，有2种载入方式，一种是GET，一种是POST，下面我们看下手册中记载的说明。

在每一个匹配元素的load事件中绑定一个处理函数。

如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。

注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。

再来看下关于jQuery的函数介绍

  1. load(url, [data], [callback]) 
  2. url  String  待装入 HTML 网页网址。 
  3. data (可选) Map,String  发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。 
  4. callback (可选) Callback  载入成功时回调函数。 

data数据是可选取的，如果不填写data数据，jQuery则采用GET方式来请求指定的网页，如果填写了，则采用POST方式，同时将参数data传递给页面。

下面看下jQuery 1.4.2里面关于load函数原型的代码：

  1. load: function( url, params, callback ) { 
  2.         if ( typeof url !== "string" ) { 
  3.             return _load.call( this, url ); 
  4.  
  5.         // Don't do a request if no elements are being requested 
  6.         } else if ( !this.length ) { 
  7.             return this; 
  8.         } 
  9.  
  10.         var off = url.indexOf(" "); 
  11.         if ( off >= 0 ) { 
  12.             var selector = url.slice(off, url.length); 
  13.             url = url.slice(0, off); 
  14.         } 
  15.  
  16.         //默认为使用GET方式请求页面 
  17.         var type = "GET"; 
  18.  
  19.         // 如果有data参数，检测是否为函数 
  20.         if ( params ) { 
  21.             // If it's a function 
  22.             if ( jQuery.isFunction( params ) ) { 
  23.                 // We assume that it's the callback 
  24.                 callback = params; 
  25.                 params = null; 
  26.  
  27.             // 不是函数，则构建成一个字符串 
  28.             } else if ( typeof params === "object" ) { 
  29.                 params = jQuery.param( params, jQuery.ajaxSettings.traditional ); 
  30.                 //使用POST方式传递参数 
  31.                 type = "POST"; 
  32.             } 
  33. } 

也就是我们在处理url页面时，含data参数的时候，比如：ID=1233，USERID=liupeng 我们应该使用$_POST变量来接受，没有data参数的时候使用$_GET。

]]> http://www.liupeng.us/jQuery-load-use-which-method/ HTML/CSS/JS 2010-09-25 13:53 http://www.liupeng.us/i6bug-div-select/ IE6遮罩层select的BUG Kevin IE6的BUG太多，其中一个就是遮罩层（div）遮不住select框，而IE7以上版本是没有此问题的。现在来重现一个BUG。点击查看演示页面

大小: 45.82 K 尺寸: 500 x 183 浏览: 375 次 点击打开新窗口浏览全图

下图为 > IE7 效果：

大小: 45.93 K 尺寸: 500 x 175 浏览: 277 次 点击打开新窗口浏览全图

遮罩层在IE下面，是遮不住select下拉选择器的。于是采用一个特殊的方法：

虽说div直接盖不住select但是div可以盖iframe，而iframe可以盖select,所以，把一个iframe来当作div的底，这个div就可以盖住select了.

当使用了iframe后发现，弹出界面是透明白色的，而不是想象中的透明黑色，于是在src中加入一个透明网页：

  1. <html> 
  2.     <head> 
  3.         <title></title> 
  4.     </head> 
  5.     <body style="background-color:#000;"></body> 
  6. </html> 

最后的遮罩层div代码如下：

  1. <div id="overlay"> 
  2.     <iframe style="width:100%;height:100%;position:absolute;visibility:inherit;z-index:-1;" src="touming.html" frameborder="0"></iframe> 
  3. </div> 

问题虽然解决了，但是还是不完美，因为遮罩层显示的时候，虽然遮罩层盖住了select，但是如此同时select也消失不见了 = = ！

大小: 38.59 K 尺寸: 500 x 176 浏览: 259 次 点击打开新窗口浏览全图

]]> http://www.liupeng.us/i6bug-div-select/ HTML/CSS/JS 2010-08-29 16:40 http://www.liupeng.us/firefox-plugin-save-webpage-as-pic/ 火狐插件网页另存为图片 Kevin 上网的是时候经常会碰到这样的情况，就是看到一个自己觉得比较漂亮和欣赏的网页，就想先存下来，研究下她的配色和框架结构，以前用的TheWorld，有相关功能直接保存为图片。但是为了观赏到HTML5技术和CSS3技术，响应下无毒安全浏览器，现在还是用Firefox比较多。今天突然发现了这款软件，真的不错。Pearl Crescent Page Saver ，试了下效果，确实不错，可以将页面和区域保存为图片，保存的图片为PNG或者JPG格式，图片名称为网页的title。来看看官方的说明：

Pearl Crescent Page Saver is an extension for Mozilla Firefox that lets you capture images of web pages, including Flash content. These images can be saved in PNG or JPEG format. Using Page Saver, you can capture an entire page or just the visible portion. You can control the image capture process via a wide variety of settings, including the image file name and scale (e.g., save at 50% of original size).

免费版本下载地址：http://pearlcrescent.com/products/pagesaver/pagesaverbasic-2.6.1.xpi

时光博客下载地址：pagesaverbasic-2.5.xpi

HOHO，又解决了一个难题了！

]]> http://www.liupeng.us/firefox-plugin-save-webpage-as-pic/ HTML/CSS/JS 2010-03-02 12:47 http://www.liupeng.us/how-to-fix-js-innerhtml-double-quotes/ JS innerHTML Double Quotes Kevin 通过js的innerHTML来获取一个dom节点，内部的html值时，如果属性值没有空格，则IE左右版本下，都会出现标签大些，双引号丢失问题。如果属性值有空格，则标签会变成大写，引号则正常输出.看下面示例：

当属性值无空格时：
FF3.5.7（gecko/20091221）<div id="div2"></div>

IE6 弹出:<DIV id=div2></DIV>
IE7 弹出:<DIV id=div2></DIV>
IE8 弹出:<DIV id=div2></DIV>

有空格时：
FF3.5.7（gecko/20091221）<div id="div2 "></div>

IE6 弹出:<DIV id="div2 "></DIV>
IE7 弹出:<DIV id="div2 "></DIV>
IE8 弹出:<DIV id="div2 "></DIV>

产生这个BUG的原因是什么呢？

When you get the innerHTML of a DOM node in IE, if there are no spaces in an attribute value, IE will remove the quotes around it.IE's innerHTML doesn't remove quotes from non standard attributes.

即使是jQuery里面，jquery团队的技术人员也没有解决这个问题.

提供下解决方案：

  1. function ieInnerHTML(obj) { 
  2.      var zz = obj.innerHTML, 
  3.          z =  
  4.        zz.match(/<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>/g); 
  5.       if (z){ 
  6.         for (var i=0;i<z.length;i++){ 
  7.           var y, zSaved = z[i]; 
  8.           z[i] = z[i].replace(/(<?\w+)|(<\/?\w+)\s/, 
  9.                               function(a){return a.toLowerCase();}); 
  10.           y = z[i].match(/\=\w+[?\s+|?>]/g); 
  11.            if (y){ 
  12.             for (var j=0;j<y.length;j++){ 
  13.               z[i] = z[i].replace(y[j],y[j] 
  14.                          .replace(/\=(\w+)([?\s+|?>])/g,'="$1"$2')); 
  15.             } 
  16.            } 
  17.            zz = zz.replace(zSaved,z[i]); 
  18.          } 
  19.        } 
  20.       return zz; 
  21.      } 

在相应的地方调用函数ieInnerHTML

  1. if(/*@cc_on!@*/0){ 
  2.     inner_str = ieInnerHTML(obj); 
  3. }else{ 
  4.     inner_str = obj.innerHTML; 
  5. } 

 原理：对IE版本进行对应的JS处理，而且相应的元素标签中不要出现非标准元素

参考资料：

  1. innerHTML removes attribute quotes in Internet Explorer
  2. innerHTML中的双引号哪去了？

 

]]> http://www.liupeng.us/how-to-fix-js-innerhtml-double-quotes/ HTML/CSS/JS 2010-01-22 00:53 http://www.liupeng.us/ImageSwitch-for-jquery/ ImageSwitch For jQuery Kevin 最近在寻找图片切换效果，在网上找到了个不错的jQuery版的图片切换效果，支持多种样式，纯JS实现，视觉上绝对不逊色于FLASH。废话不多说看下效果图

兼容性：完美兼容Firefox 3.5.5 for win ,IE6,IE7,IE8，其他浏览器未测试

独立预览地址：http://liupeng.us/demo/jQuery/ImageSwitch/

示例代码：ImageSwitch_jQuery.rar

]]> http://www.liupeng.us/ImageSwitch-for-jquery/ HTML/CSS/JS 2009-12-11 01:01 http://www.liupeng.us/jquery-object-and-dom/ jQuery Object and Dom Kevin 项目碰到一个问题，问题大概是这样的：

  1. <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  2.     <tr class="line1" filetype="a"> 
  3.       <td></td> 
  4.     </tr> 
  5.      <tr class="line2" filetype="b"> 
  6.       <td></td> 
  7.     </tr> 
  8.   </table> 

需要对上面table的每个tr（N行）绑定事件，对filetype="a"和filetype="b"的绑定不同的的右键菜单。右键菜单是通过jQuery插件contextmenu实现的。

想绑定事件，自己只能想到2种方案：

  • 第一：使用jQuery的选择符分别筛选出filetype为a和b的。
  • 第二：使用普通的DOM对象，通过getAttribute实现。

第一种方法尝试了，发现jQuery不支持自定义选择符，也就是类似 $("input[name='newsletter']")的标签。可能也有，但是由于项目紧没有去尝试。

第二中方法，使用普通的DOM对象来获取不同的filetype，然后给tr做绑定，但是问题来了，jQuery的插件只支持jQuery对象。上网搜索了下发现原来DOM对象转换成jQuery对象非常简单，只要在DOM对象外面加入符号"$"就可以了。比如

  1. //普通的DOM对象 
  2. var otrs = document.getElementById("filelist").getElementsByTagName("tr"); 
  3.  
  4. //jQuery对象 
  5. jotrs = $(otrs); 

经常会碰到jQuery与原生的JS混写的时候，也不知道这样的效率如何，转换成jQuery对象的时候，会带来多大的性能损耗。

另外jQuery对象转换成DOM对象稍微要复杂一点，由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

  1. $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5] 

这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：

  1. $("#msg").html(); 
  2. $("#msg")[0].innerHTML; 
  3. $("#msg").eq(0)[0].innerHTML; 
  4. $("#msg").get(0).innerHTML; 
]]> http://www.liupeng.us/jquery-object-and-dom/ HTML/CSS/JS 2009-11-30 13:53 http://www.liupeng.us/js-Mutilang-Solutions/ JS多语言设计方案 Kevin 公司目前碰到一个项目，客户是美国CDC，因为考虑到中方与美方的合作机构，所以需要设计出多版本语言切换。要求前台实现。因为语言包不需要经常修改没必要入库操作，所以将语言包写在一个配置文件里面是最好的（自我感觉）。

先看DEMO：JS多语言设计方案（带记忆效果）

于是第一次尝试，我写了一个语言包（JS文件）：

  1. message.en={ 
  2.         "1": "Application Form for Project Activity", 
  3.         "2": "Project Name:", 
  4.         "3": "National Level:", 
  5.         "4": "Provincial Level:", 
  6.         "5": "Implementing Unit (NCAIDS division, provincial unit, or other):", 
  7.         "6": "Project ID #:" 
  8.        } 
  9.  
  10. message.chs={ 
  11.         "1": "项目活动申请表", 
  12.         "2": "项目名称:", 
  13.         "3": "国家级单位:", 
  14.         "4": "省级单位:", 
  15.         "5": "项目执行单位(注明性艾中心科室，省级单位，或其他):", 
  16.         "6": "项目活动序号:" 
  17.      } 

然后给需要替换的语言包文字

  1. <p class="LANGS">Form Submission Date:</p> 

然后通过获取 具有class="LANGS"的对象，组成数组集合。

  1. var oLangArea = document.getElementsByTagName("p"); 

然后循环遍历oLangArea数组，进行语言替换，刚开始觉得很不错。后来，由于疏忽漏掉一个元素，结果BUG就出来了。
因为这种方案是按oLangArea数组的自然顺序排序的，比如在2：National Level:的前面加入一个元素，这样2以后的顺序都需要更改，项目中有43个语言块，结果带来了大量的重复劳动力...于是最后放弃了这种做法。

第二种解决方案

顺利的解决了上面的问题，但是需要多添加一些HTML代码，语言包不变。
HTML代码如下：

  1. <p class="LANGS" id="L7">Form Submission Date:</p> 

 

  1. for(var i=0;i<=oLangArea.length;i++){ 
  2.             j = (oLangArea[i].getAttribute("id")).substring(1); 
  3.             oLangArea[i].innerHTML = eval('message.'+lang+'['+j+']'); 
  4. } 

可以看出来这个可以适应以后的语言包顺序更改。只需要在相应位置加入HTML代码，然后在语言包中指定对应多语言。通过ID来绑定，效率方面应该比第一种方案要低一些，但是少量的语言包应该不会有多大的差别，且JS语言包已经载入，细微的效率差别，却换来了长期的可维护性。

以上是个人愚见，因为JS还很差，正在努力学习中。分享一下自己实践的项目，大家一起进步。

]]> http://www.liupeng.us/js-Mutilang-Solutions/ HTML/CSS/JS 2009-11-09 16:58 http://www.liupeng.us/css-border-triangle/ CSS的border实现三角的随想 Kevin 沉寂了好久哇，今天出了冒个泡，证明我还活着，然后再有模有样来篇技术稿，然后继续沉寂。

今天在CSS88的博客看到一篇有趣的文章《用css的border属性实现三角》。首先我会站在自己角度思考一下，如果要实现这样的三角效果，我会采取哪种方法？

我的第一反应就是用图片，但是同时也考虑到图片的缺点，如果以个页面需要几种样式的三角，是不是需要做几种图片？另外如果页面有换肤的需求，是不是同时图片也得换？

于是出于优化的思想考虑，看到用CSS来解决三角应该属于最佳解决方案吧，至少节约了三角图片的下载时间和便于换肤。但是也有他的缺点，因为是CSS的，所以必须考虑到各个浏览器对CSS的兼容状态。

当然本文仅讨论如何用border实现三角。首先来看下面以副图片：

大小: 48.54 K 尺寸: 500 x 447 浏览: 2591 次 点击打开新窗口浏览全图

从图中大家可以看到，一个高度，宽度为0的box是如何，变成一个三角形的。一下是html代码。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  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>用css的border属性实现三角</title> 
  6. <style> 
  7. #box{ 
  8.     margin:0px auto; 
  9.     width:0px;  
  10.     height:0; 
  11.     font-size:0px; 
  12.     border-bottom:50px #F00 solid;  
  13.     border-left:50px #03F solid;  
  14.     border-right: 50px #F90 solid;  
  15.     border-top:50px #6C0 solid; 
  16. } 
  17.  
  18. </style>  
  19. </head> 
  20. <body> 
  21. <div id="box"></div> 
  22. </body> 
  23. </html> 

下面来看看三角的兼容性

测试平台：WIN XP SP2 2600
测试浏览器：Firefox 3.5.3 ，IE 6
测试结果以及兼容方案如下图

大小: 44.35 K 尺寸: 500 x 419 浏览: 220 次 点击打开新窗口浏览全图

之前一直以为border就是一条直线，然后四边没有交集，因为很少用到超过5px的border,所以从来没有注意到border放大后的效果，现在终于明白了，border并不是直线，而是在顶点段同相邻边分享顶角。

三角的原理：

比如要做一个向上的三角形，那么之需要设置块状元素的width:0px;height:0px;font-size:0px;，然后给顶角相反方向的border外的三个边设置背景颜色为网页底色（上例中位白色）即可。

关于三角的demo演示：http://www.css88.com/demo/border/border.html

]]> http://www.liupeng.us/css-border-triangle/ HTML/CSS/JS 2009-10-25 23:52 http://www.liupeng.us/firefox3_5-will-not-support-moz-opacity/ Firefox3.5已不支持属性-moz-opacity Kevin 安装了FireFox3.5之后，发现以前时光博客iGoogle皮肤中的换肤功能中有透明属性的一些DIV都不透明了。点击”换肤“按钮的时候，发现overlay已经一片黑暗，不再是60%的透明，于是猜想，FireFox3.5难道不支持它自家的CSS透明属性-moz-opacity了？上网一查，果真如此。
在https://developer.mozilla.org/En/CSS:-moz-opacity里说得很清楚了：

Note: Firefox 3.5 and later do not support -moz-opacity. By now, you should be using simply opacity.

3.5以后的版本将不再支持-moz-opacity属性，现在都要改用opacity这个属性了。

于是要设置一下透明度为60%的DIV就应该这样写了：

  1. div.transp { 
  2. opacity: 0.6; /* Firefox, Safari(WebKit), Opera) 
  3. filter: "alpha(opacity=60)"; /* IE 8 */ 
  4. filter: alpha(opacity=60); /* IE 4-7 */ 
  5. zoom: 1; /* needed in IE up to version 7, or set width or height to trigger "hasLayout" */ 
  6. } 

opacity这个是属于CSS3里面的东西了，属于CSS3的标准。然而微软IE8还不支持这一属性。

]]> http://www.liupeng.us/firefox3_5-will-not-support-moz-opacity/ HTML/CSS/JS 2009-07-02 23:45 http://www.liupeng.us/js-css-param/ js,css文件后面为什么有参数 Kevin 有同学经常遇到html页面里加载的js与css文件带有参数，比如： 

  1. <script type="text/javascript" src="base.js?1217128319"></script> 
  2. <link rel='stylesheet' href='http://liupeng.us/base.css?version=2.3.3' type='text/css' /> 
  3. <link rel='stylesheet' href='http://liupeng.us/base.css?version=20080727182553' type='text/css' /> 

使用参数有两种可能，

    * 脚本并不存在，而是服务端动态生成的，因此带了个版本号，以示区别。
    * 客户端会缓存这些css或js文件，因此每次升级了js或css文件后，改变版本号，客户端浏览器就会重新下载新的js或css文件

第二种情况最多，也可能两种同时存在。

版本号，可以是一个随机数，也可以是一个递增的值，大版本小版本的方式，或者根据脚本的生成时间书写，比如 20080727182553 就是精确到了生成脚本的秒，而 2.3.3 就是大版本小版本的方式。

]]> http://www.liupeng.us/js-css-param/ HTML/CSS/JS 2009-06-02 18:26 http://www.liupeng.us/archives/102/ FLASH设为首页解决方案 Kevin 因为一般的FLASH网站中，都需要添加一个设为首页和添加收藏，添加收藏已经解决了，这些代码网上很多，就不在这里写出来，需要的朋友可以去Google.com搜索，本文讨论一下FLASH中如何设置首页。

设置首页问题，在网上搜索了不少，答案都是不准确的，始终没有找到很好的解决方案。不过自己用了一个小把戏来实现了FLASH设为首页，而且各个浏览器中均可以实现。

首先来看下效果

IE内核下：

大小: 143.24 K 尺寸: 500 x 293 浏览: 379 次 点击打开新窗口浏览全图

FF下的截图：

（因为FF的安全性问题，所以必须请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true）

大小: 48.35 K 尺寸: 500 x 109 浏览: 343 次 点击打开新窗口浏览全图

大小: 104.92 K 尺寸: 500 x 261 浏览: 328 次 点击打开新窗口浏览全图

原理：

相信大家看那个那个覆盖在FLASH上面的黑色遮罩层，对，我的解决方案是，用层的相对来定位，当然这个工作不需要FLASH设计人员来实现，只要在场景里面有设为首页几个字即可，不需要添加任何AS代码。

层级默认的属性值都是static，静态。就不用多说了。最关键的是relative（相对）以及absolute（绝对）。
往往我们如果是COPY别人的代码，会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果，而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦，而且几乎无法完美实现效果。我一开始也无能为力，后来发现只要把其上一级的样式属性 position设置为relative就可以了。

也就是说，position的属性值的效果，直接受其容器样式中position属性值影响。
例如如下A-B的嵌套结构
<div id="A">
<div id="B">
</div>
</div>

当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。

 

XHTML代码如下：

  1. <div id="flashArea"> 
  2.     <div id="setArea" onclick="setHomepage();"></div> 
  3.         <object>中间为插入的FLASH</object> 
  4. </div> 

因为是相对于FLASH层来定位，所以一定要把要定位的层插入在FLASH层里面，这样他的父级DIV就是FLASH。

JS代码如下：

  1. <script type="text/javascript"> 
  2.  function setHomepage() 
  3. { 
  4.  if (document.all) 
  5.     { 
  6.         document.body.style.behavior='url(#default#homepage)'; 
  7.         document.body.setHomePage('http://liupeng.us'); 
  8.     } 
  9.     else if (window.sidebar) 
  10.     { 
  11.     if(window.netscape) 
  12.     { 
  13.          try 
  14.    {  
  15.             netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
  16.          }  
  17.          catch (e)  
  18.          {  
  19.     alert( "该操作被浏览器拒绝，如果想启用该功能，请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true" );  
  20.          } 
  21.     } 
  22.     var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components. interfaces.nsIPrefBranch); 
  23.     prefs.setCharPref('browser.startup.homepage','http://liupeng.us'); 
  24.  } 
  25. } 
  26. </script> 

这样是为了实现IE核心和非IE核心的兼容设置。

CSS代码：

上面不是已经看到了一个黑色填充的DIV块吗？设置成无色的话，这个层在IE下面就失效了，FF中还可行，所以才用了一种新办法，就是用透明层来实现。

  1. #flashArea{ margin:0px auto; width:800px; height:600px; position:relative; z-index:99;} 
  2. #setArea{ height:60px; width:60px; background-color:#000; position: absolute; top:150px; left:137px; z-index:1000; cursor:pointer;/*-moz-opacity:0;opacity:0;filter:alpha(opacity=0);*/} 

在线演示地址（点击第一个FLASH按钮）

]]> http://www.liupeng.us/archives/102/ HTML/CSS/JS 2009-05-17 10:28 http://www.liupeng.us/javascript-window-open-object-error/ js中的window.open返回object的错误 Kevin 在FLASH制作中碰到的，点击进入网站后，需要弹出一个满屏窗口（不带tpolbar）来显示整个FLASH网站。因为FLASH里面和网页中执行js代码是一样的，所以以网页为例。

系统中用javascript中的window.open后，页面返回了一个[object]。因为系统的原因，必需使用href="javascript:window.open()"这样的格式。所以只能通过以下办法解决。

解决window.open后返回object的错误

  1. <a href="javascript:void(window.open('','','width=200,height=200'))">window.open()</a> 

只在js的外层加上一个void不带返回参数的声明，依稀记得C语言时用过这个声明。

顺便在这里将window.open函数的参数使用也列出来：

  1. window.open函数参数列表 
  2. window = object.open([URL ][, name ][, features ][, replace]]]]) 
  3. URL：新窗口的URL地址 
  4. name：新窗口的名称，可以为空 
  5. featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。 
  6. fullscreen= { yes/no/1/0 } 是否全屏，默认no 
  7. channelmode= { yes/no/1/0 } 是否显示频道栏，默认no 
  8. toolbar= { yes/no/1/0 } 是否显示工具条，默认no 
  9. location= { yes/no/1/0 } 是否显示地址栏，默认no 
  10. directories = { yes/no/1/0 } 是否显示转向按钮，默认no 
  11. status= { yes/no/1/0 } 是否显示窗口状态条，默认no 
  12. menubar= { yes/no/1/0 } 是否显示菜单，默认no 
  13. scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes 
  14. resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no 
  15. width=number 窗口宽度（像素单位） 
  16. height=number 窗口高度（像素单位） 
  17. top=number 窗口离屏幕顶部距离（像素单位） 
  18. left=number 窗口离屏幕左边距离（像素单位） 
]]> http://www.liupeng.us/javascript-window-open-object-error/ HTML/CSS/JS 2009-05-16 15:36 http://www.liupeng.us/flash-fscommand-exec/ FLASH执行本地文件 Kevin 制作FLASH引导页后，类似于电脑随机光盘，光盘内置软件引导安装FLASH等...往往需要点击后安装相应的软件，也就是执行相应的程序，如WIN下面执行exe安装文件。

但是自从FLASH5以后开始提高了FLASH在本地的安全性。不允许直接执行EXE文件。那么要如何达到我们的目的呢？只要注意好以下几点就可以。

一、调用EXE文件最重要的一点，必须把你的SWF文件先转换成EXE，也就是FLASH的播放器

关于这个怎么转换，看如下图示

大小: 47.04 K 尺寸: 423 x 191 浏览: 345 次 点击打开新窗口浏览全图

FLASH里面发布swf文件之后，打开该文件 点击 文件 -> 创建播放器 就可以导出EXE版本

二、要在test.exe同一目录中新建一个文件夹，名字叫“fscommand”，你要调用的外部可执行文件要在fscommand目录下，且不能在子目录下，比如是notepad.exe，请copy notepad.exe到fscommand目录下

三、AS的代码为如下

1、调用exe，

  1. on (release) {  
  2. fscommand("exec", "notepad.exe");  
  3. } 

（如果只执行exe，而且愿意将exe文件放在fscommand根目录下，2，3可以不看）

2.要打开其他类型的文件（chm），可以曲线救国

可以通过bat文件做中间跳转来解决其他类型文件和要执行程序目录的问题（如果对产品追求完美）

建一个批处理文件，help.bat.编辑这个文件加入start *.chm（注意中间有空格）
方法同上。将"*.exe",换成"help.bat".

3、打开本地一个目录的话（这个要求比较特殊）

我的电脑：::{20D04FE0-3AEA-1069-A2D8-08002B30309D}
我的文档：::{450D8FBA-AD25-11D0-98A8-0800361B1103}
控制面板：::{20D04FE0-3AEA-1069-A2D8-08002B30309D}\::{21EC2020-3AEA-1069-A2DD-08002B30309D}

如打开我的电脑:
加在FLASH的按钮上:
on(release){
getURL("::{20D04FE0-3AEA-1069-A2D8-08002B30309D}");
}

现在这个问题已经解决，FLASH制作，当中遇到过不少问题，以后会慢慢的和大家分享。

]]> http://www.liupeng.us/flash-fscommand-exec/ HTML/CSS/JS 2009-05-16 15:24 http://www.liupeng.us/archives/91/ 用PS打造传统色彩按钮 Kevin
大小: 19.6 K 尺寸: 261 x 134 浏览: 406 次 点击打开新窗口浏览全图

由于liupeng最近做设计图时，需要用到比较传统的良好色彩的按钮（实在不愿意称其为所谓的WEB2.0），以前都是自己摸索的方法，无非是几个图层叠加的制作方法。维护起来比较麻烦而且缩放按钮的时候，整体色彩感不是很好。于是采用了一个图层方法。
1、打开PS新建一个图层
2、用圆角矩形拉出一个按钮，双击图层查看属性。下面是关键步骤。
3、选择渐变叠加，进行如下设置
      a.混合模式：正常   
      b.渐变颜色：（0%位置：#94c516 ）（ 52%位置：#8eb92a #72aa00）（92%位置：#a8c732） （100%位置：#b9ce44）
      c.样式：线性
      d.角度90°（为了实现垂直的颜色渐变）
      e.缩放100%
4、接下来是描边
      a.大小：1像素
      b.混合模式：正常
      c.不透明100%
      d.填充类型：颜色
      e.颜色：#679800
5、内发光效果
      a.结构：（混合模式：正常）（不透明度40%）（颜色#ffffff）
      b.图素：（方法：柔和 杂色0%）（阻塞：0%大小：7像素）
      c.品质：（范围50%）
原理就是利用渐变色的中间位置设置2个相近颜色实现实现颜色的视觉跳跃，模拟白色透明层。内发光让按钮看起来更有层次感。要实现上面的按钮效果，最重要的就是要处理好渐变色的颜色选择，一个色系的4种颜色深度。当然还有更简单的方法，就是用PS样式实现这种。

]]> http://www.liupeng.us/archives/91/ HTML/CSS/JS 2009-03-27 09:02 http://www.liupeng.us/user-centered-design/ 以用户为中心的产品设计理念 Kevin 对于"以用户为中心的产品设计"，也就是"User Centered Design"，以前都是按照自己的一些理解去做设计，没有详细的去体会和理解UCD，前些天在北京有一个面试网页设计师的机会，填完考卷后，面试官问我有没有带个人作品，于是把个人作品给他看了下，面试官于是针对时光博客的一些作品问了一些问题，都是关于设计理念和设计思路的。自己答得很不理想，因为自己做得多反思的少。很少去理解一些学术上的概念，只零散的知道一些模糊的概念。谈话的过程持续了将近2个小时，中间面试官的话，很多让我受益匪浅，这次的面试让我学到了不少的设计思维和概念。感谢这次的面试官，同时在网上搜到一些相关的技术文章，在这里分享一下：

衡量一个好的以用户为中心的产品设计，可以有以下几个纬度：产品在特定使用环境下为特定用户用于特定用途时所具有的有效性（effectiveness）、效率（efficiency）和用户主观满意度（satisfaction），延伸开来还包括对特定用户而言，产品的易学程度、对用户的吸引程度、用户在体验产品前后时的整体心理感受等。

简单的说，在进行产品设计时从用户的需求和用户的感受出发，围绕用户为中心设计产品，而不是让用户去适应产品，无论产品的使用流程、产品的信息架构、人机交互方式等，都需要考虑用户的使用习惯、预期的交互方式、视觉感受等方面。

为什么要用以用户为中心的设计方式？


1. 一个产品的来源可能有很多种情况，用户需求、企业利益、市场需求，或可能是技术发展所驱动。从本质来说，这些不同的来源并不矛盾。一个好的产品，首先是用户需求和企业利益（或市场需求）的结合，其次则是低开发成本的，而这两者都可能引发对技术发展的需求。

  • 越是在产品的早期设计阶段，能充分的了解目标用户群的需求，结合市场需求，就能越大程度降低产品的后期维护甚至回炉返工的成本。“如果在产品中给用户传达 “我们很关注他们”这样的感受，用户对产品的接受程度就会上升”，同时能更大程度的容忍产品的缺陷，这种感受决不仅仅局限于产品的某个外包装或者某些界面载体，而是贯穿产品的整体设计理念，这需要我们从早期的设计中就要以用户为中心。
  • 基于用户需求的设计，往往能对设计“未来产品”很有帮助，“好的体验应该来自用户需求，同时超越用户需求”。这同时也有利于我们对于系列产品的整体规划。


2. 随着用户有着越来越多的同类产品可以选择，用户会更注重他们使用这些产品的过程中所需要的时间成本、学习成本和情绪感受。

  •  时间成本

简而言之就是用户操作某个产品时需要花费的时间，没有一个用户会愿意将他们的时间花费在一个对自己而言仅为实现功能的产品上，如果我们的产品无法传达任何积极的情绪感受，让用户快速的完成他们所需要的功能，这是最基本的用户价值。

  • 学习成本

主要针对新手用户而言，这点对于网络产品来说尤其关键。同类产品很多，同时容易获得，那么对于新手用户而言，他们还不了解不同产品之间的细节价值，影响他们选择某个产品的一个关键点就在于哪个产品能让他们简单的上手。有数据表明，如果新手用户第一次使用所花费在学习和摸索的时间和精力上很多，甚至第一次使用没有成功，他们放弃这个产品的几率是很高的，即使有时这意味着他们同时需要放弃这个产品背后的物质利益，用户也毫不在乎。

  • 情绪感受

一般来说，这点是建立在前面两点的基础上，但在现实中也存在这样一种情况：一个产品给用户带来极为美妙的情绪感受，从而让他们愿意花费时间去学习这个产品，甚至在某些特殊的产品中，用户对情绪感受的关注高于一切。例如在某些产品中，用户对产品的安全性感受要求很高，此时这个产品可能需要增加用户操作的步骤和时间，来给用户带来“该产品很安全很谨慎”的感受，这时减少用户的操作时间，让用户快速的完成操作，反而会让用户感觉不可靠。

]]> http://www.liupeng.us/user-centered-design/ HTML/CSS/JS 2009-02-23 21:23 http://www.liupeng.us/javascript-css-style/ JS中CSS Style标签对照表 Kevin 写JS时会用到，如果发现自己想要的效果没有实现，而程序没问题的话，就参照下此表对应看下标签是否正确。

盒子标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
float floatStyle
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
 
颜色和背景标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
color color
 
样式标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
display display
list-style-type listStyleType
list-style-image listStyleImage
list-style-position listStylePosition
list-style listStyle
white-space whiteSpace
 
文字样式标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
font font
font-family fontFamily
font-size fontSize
font-style fontStyle
font-variant fontVariant
font-weight fontWeight
 
文本标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
letter-spacing letterSpacing
line-break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justify textJustify
text-transform textTransform
vertical-align verticalAlign
]]> http://www.liupeng.us/javascript-css-style/ HTML/CSS/JS 2009-02-12 11:03 http://www.liupeng.us/quirks-mode-in-ie6-and-ie7/ [译]Quirks mode in IE 6 and IE 7 Kevin 由于近段时间在研究“Quriks mode”，找到的都是国外的文章，于是翻译了一篇。如翻译不准确，请参看原文.

将IE7运行在“怪异模式”下，对那些已经能熟练操作旧版IE中渲染和控制但是依然喜欢运行其他的浏览器在“标准兼容模式”，是一个不错的选择。这大概很少人会选择使用，但是它记录完整。

据IE 7开发团队（IE博客） ，IE7运行在“怪异模式”将采取类似的IE 6中的“怪异模式”，为了向下兼容的原因。我们还没有广泛测试此渲染模式。

如何触发怪异模式

一些doctypes （ Sivonen ; Gutfeldt ; Bergevin ）或列入一个<xml>声明，在IE6中，触发“怪异模式”或向后兼容模式 。在这种情况下， IE6就像IE5.5，并共享相同的bugs，问题和行为作为其高级版本。

在IE7中，一个<xml>声明不会再变化渲染模式（Campbell） 。谁想要保留所有版本的IE直到IE 7在怪异模式中（在不影响其他浏览器）已经不能依靠这个了。但是，在doctype前面，在<xml>声明后面插入一个行注释，在IE 7中仍会触发怪异模式 ，如在下面的例子。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2.    <!-- ... and keep IE7 in quirks mode --> 
  3.    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

在IE7中怪异模式一样可以被触发，当页面doctype申明HTML 4.01,在DTD申明前面插入注释，会在IE6和IE7中触发向后兼容模式。

  1. <!-- quirks mode --> 
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

查看渲染模式

浏览器的渲染模式并不总是显而易见的，在IE浏览器的地址栏里面输入：

  1. javascript:alert(document.compatMode) 

一个便利书签(Dorward)可以帮助你决定浏览器正在哪个渲染模式。在IE中右键打开下面链接并且收藏它。Qors Mode

原文地址：http://www.satzansatz.de/cssd/quirksmode.html

参考资料：

       Markus Mielke:
       Call to action: The demise of CSS hacks and broken pages
       Henri Sivonen:
       Activating the Right Layout Mode Using the Doctype Declaration
       Matthias Gutfeldt:
       Doctypes and their respective layout mode
       Holly Bergevin:
       Rendering Mode and Doctype Switching
       Alastair Campbell:
       Internet Explorer 7 doctype behaviour
       David Dorward:
       Quirks or Standards Mode Bookmarklet

This quirks mode chapter is part of the article On having layout.

Created, and last updated:
       Aug. 15, 2005
       Jun. 3, 2006

Editors:
       Holly Bergevin
       Ingo Chao
       Bruno Fassino
       John Gallant
       Georg Sørtun
       Philippe Wittenbergh

Translations:
       Brazilian Portuguese by Mauricio Samy Silva
       Italian by Gabriele Romanato
       Chinese by Liupeng

Contact us:
       spam.layout@satzansatz.de

Copyright notice:
       This work is published under a Creative Commons license.

]]> http://www.liupeng.us/quirks-mode-in-ie6-and-ie7/ HTML/CSS/JS 2009-02-01 21:55 http://www.liupeng.us/about-quirks_mode-and-strict_mode/ [转]浏览器的两种模式quirks mode 和strict mode Kevin 在看js代码时，有时会看到关于quirks mode(怪异模式)和strict mode(严格格式)的东西，一直也没深究怎么回事，只是零零碎碎的有些概念，最近终于受不了这种似懂非懂的感觉，决定好好学习总结一下。

1、quirks mode和strict mode是浏览器解析css的两种模式，或者可以称之为解析方法。目前正在使用的浏览器这两种模式都支持 。

2、历史原因。

当早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式).

3、后来的浏览器虽然支持strict mode，但众多浏览器并未放弃支持quirks mode。

一个重要的原因就是为了之前大量在quirks mode下开发的网页能够得到正确的显示。所以，这些支持两种模式的浏览器当拿到一张网页时，所做的一个前期工作就是判断采取何种方式进行解析(判断条件后面会说)。注：Explorer 5仍然只支持quirks mode 

4、浏览器如何判断何用哪种方式解析CSS？

解决方案就是采用doctype声明，大多数浏览器采用下面的这些判断规则

浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/
对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：
对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析

 

在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。在ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>)，则采用quirks mode解析。这条规则在ie7中已经移除了。

5、mozilla提出了almost strict moede ，和strict mode的区别是：

img元素在strict中是inline的，而在almost strict mode中是block的。其实我们前面所说，在大多数浏览器，大多数doctype声明触发的是almost strict mode;


6、quirks mode和strict mode最大的不同就是提现在对盒模式的解释上 ，这也是我们在js里要注意的地方。

什么是盒模式？ 这是针对块级元素说的，我这里只简单说一下(详情请查阅相关资料)。说白了就是把块级元素想像成一个装东西的盒子，而margin,padding,border,width这些css属性构成了盒模式。而区别就是产生在width属性上：


在strict mode中 ：

width是内容宽度 ，也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

 

在quirks mode中 ：

width则是元素的实际宽度 ，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)


这里把盒模式相关的东西记录一下，备忘 ！

·内联元素 ，例如<a>、<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。 注2. 内联元素（display: inline） 内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。

·浮动元素（无论左或者右浮动）边界不压缩 ，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。

·如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0% ，因此不会被显示，此点在采取层布局的时候需特别注意。

·边界值可为负，其显示效果各浏览器可能不相同 。

·填充值不可为负 。

·边框默认的样式（border-style）为不显示（none） 。


7、在quirks mode 和 strict mode中还有一个区别 ，但没经过验证，我只是发现有这个现象。

在strict mode 中，

table的css属性font-size会继承父级元素的 ，也就是说，table中的字体大小会继承父级元素字体的大小。

在quirks mode 中，

table的css属性font-size不会继承父级元素的 ，需要专门设置一下。也就是说，table中的字体大小不会继承父级元素字体的大小。


8、在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode ,它有两个值：
BackCompat 对应quirks mode
CSS1Compat 对应strict mode

9、我们在编写跨浏览器兼容性的js代码时，常用到的判断代码(来源于ext) ：

  1. var ua = navigator.userAgent.toLowerCase();     
  2.        var client = {     
  3.        isStrict:   document.compatMode == 'CSS1Compat',     
  4.        isOpera:    ua.indexOf('opera') > -1,     
  5.        isIE:       ua.indexOf('msie') > -1,     
  6.        isIE7:      ua.indexOf('msie 7') > -1,     
  7.        isSafari:   /webkit|khtml/.test(ua),     
  8.        isWindows:  ua.indexOf('windows') != -1 || ua.indexOf('win32') != -1,     
  9.        isMac:      ua.indexOf('macintosh') != -1 || ua.indexOf('mac os x') != -1,     
  10.        isLinux:    ua.indexOf('linux') != -1     
  11.        };     
  12.        client.isBorderBox = client.isIE && !client.isStrict;     
  13.        client.isSafari3 = client.isSafari && !!(document.evaluate);     
  14.        client.isGecko = ua.indexOf('gecko') != -1 && !client.isSafari;     
  15.     
  16.        /**    
  17.         * You're not sill using IE6 are you?    
  18.         */    
  19.        var ltIE7 = client.isIE && !client.isIE7;    

10、废话 ：我不知道现在的很多js框架为什么还对解析模式进行了判断。我认为这些框架肯定是给现在要开发的项目使用的，那应该都是strict mode才对呀？是不是因为还有很多人不习惯给页面加上doctype声明呢？

原文出处：http://kino.javaeye.com/blog/241260

]]> http://www.liupeng.us/about-quirks_mode-and-strict_mode/ HTML/CSS/JS 2009-02-01 20:42 http://www.liupeng.us/IE6-min-width-css-expression/ IE6中的min-width一般解决方法 Kevin 上次翻译的一篇文章How to Use CSS to Solve min-width Problems in Internet Explorer中已经找到了非JavaScript和CSS expression 实现IE中的min-width。

这次我们看看CSS expression的实现方法：

  1. #content{   
  2. _width: expression(((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700? '600px' : 'auto');   
  3. }  

这里的 

  1. ((document.compatMode && document.compatMode=='CSS1Compat')? document.documentElement.clientWidth : document.body.clientWidth) < 700  

只是个判定条件，判定页面body的宽度，如果页面body的宽度小于700（这个要根据具体的页面来指定），就把content的宽度指定为600，否则就让它自适应宽度。这里的content宽度，可以根据自己的情况来设定。

]]> http://www.liupeng.us/IE6-min-width-css-expression/ HTML/CSS/JS 2009-02-01 00:57 http://www.liupeng.us/min-width-Cross-browser-method-with-css-xhtml/ [译]min-width的跨浏览器兼容解决方法 Kevin  项目中用到min-width，找了很多解决方案，都不管用，上蓝色经典问了些高人。版主推荐了一篇国外技术文章，觉得价值比较大，就翻译一下，收藏起来。英文比较差，如果翻译有错，还请指正。

介绍
min-width这个属性除了IE6，以及IE5.X以外的浏览器一般都支持.所以本文主要是针对IE的CSS Hack!
对网页设计人员来说，缺乏支持的最小宽度min-width在Internet Explorer中造成了许多问题.到现在为止，唯一模拟min-width的方法是使用JavaScript或Internet Explorer的expressions语法（间接的JavaScript）.经过几个小时的尝试，我发现了一个纯CSS的方法.我的方法需要额外的一些div控制宽度和最小宽度，但我相信这是一个很小的代价，一个非 JavaScript方法工程跨浏览器（甚至在Mac IE5）

方法
基本思想是为那些理解min-width的浏览器提供如下正常的方法，对IE提供他独特的风格（我会解释一下教程）

The Css

  1. body {  
  2.  background:#fff url(rule.gif) 20px 0;  
  3.  color:#000;  
  4.  font-family:"trebuchet ms", "times new roman", times, serif;  
  5.  margin:20px;  
  6.  padding:0;  
  7. }  
  8. .width {  
  9.  width:50%;  
  10.  min-width:300px;  
  11.  background:#fff;  
  12. }  
  13.  
  14. .content {  
  15.  border:1px solid #c00;  
  16.  padding:5px;  
  17. }  
  18.  
  19. .rule {  
  20.  width:300px;  
  21.  background:#c00;  
  22.  color:#fff;  
  23.  margin:1em 0;  
  24. } 

body - general body styling

* background: #fff url(rule.gif) 20px 0; - shows the background grid (10 pixel and 100 pixel marks).
* color: #000; - sets the font color to black.
* font-family: "trebuchet ms", "times new roman", times, serif; - sets up the font choice.
* margin: 20px; - sets the margin to 20 pixels.
* padding: 0; - sets the padding to zero.

.width - the outer div that controls the width and min-width for browsers that understand this (or just the width for Internet Explorer).
* width: 50%; - the preferred width.
* min-width: 300px; - the minimum width allowed.
* background: #fff; - sets the background color to white.

.content - The container for the content in which you can add a border and/or padding while not affecting the width and min-width.
* border: 1px solid #c00; - adds a red 1 pixel solid border.
* padding: 5px; - sets the padding to 5 pixels.

.rule - Includes a rule line to show when min-width has been reached.
* width: 300px; - sets the width to 300 pixels.
* background: #c00; - makes the background dark red.
* color: #fff; - makes the text color white.
* margin: 1em 0; - adds a top and bottom margin of 1em.
 

The (X)HTML

 

  1. <div class="width"> 
  2.   <div class="content"> 
  3.     <h2>{width:50%; min-width:300px;} for non IE browsers</h2> 
  4.     <p>This div has a min-width of 300px and a width of 50%.<br /> 
  5.     The width can be any percentage and the min-width a px or em value.</p> 
  6.   </div> 
  7. </div> 
  8. <div class="rule">this is 300px wide</div> 

Normal method demo 1

如果在任何一个浏览器中（除IE）尝试上面的例子，并且改变浏览器窗口的大小，外面的容器（的宽度）将会缩小直到宽度达到最小宽度300px，然后不管怎么缩小，容器将一直保持300px的固定宽度.相反，如果你在IE中尝试这个例子，容器将一直缩小，甚至小于300px的标志，并且只有等到文字不允许其再缩小的时候才停止.

步骤1

主要的思想是使用一个有左边界left-border宽度为min-width的div.主要的原理是一旦div的宽度到达0,div的边界通常不会收缩.为了确保其他所有浏览器忽略附加的样式，我们必须针对IE使用，具有一般的hack方式“* html”的CSS.我们将增加一个类为minwidth的附加div.

The CSS CODE

  1. * html .minwidth {  
  2.  border-left:300px solid #800;  
  3. } 

     border-left:300px solid #800; - sets the left border to 300 pixel solid dark red so that it can be seen.

The (X)HTML 

  1. <div class="width"> 
  2.   <div class="minwidth"> 
  3.     <div class="content"> 
  4.       <h2>{width:50%; min-width:300px;} for non IE browsers</h2> 
  5.       <p>This div has a min-width of 300px and a width of 50%.<br /> 
  6.       The width can be any percentage and the min-width a px or em value.</p> 
  7.     </div> 
  8.   </div> 
  9. </div> 
  10. <div class="rule">this is 300px wide</div> 

步骤1的演示(Demo)

所有这些步骤唯IE可见.我们将看到其他的浏览器将正确执行CSS的min-width.上面的例子表明左侧暗红色边界定为300像素宽和文字在右侧的白色背景上.减少浏览器的窗口宽度会缩小文字的宽度到一个最小值，但是不会缩小边界。

步骤2

我们现在需要将文字向左移动300px以便它能占据边界宽度，像正常宽度一样.这个可以通过添加另外一个div（margin-left:-300px;）来完成.

The CSS

  1. * html .container {  
  2.  margin-left:-300px;  
  3. } 

  margin-left:-300px; - set the left margin to -300 pixel so that the contents will move over the border area.

The (X)HTML

  1. <div class="width"> 
  2.   <div class="minwidth"> 
  3.     <div class="container"> 
  4.       <div class="content"> 
  5.         <h2>{width:50%; min-width:300px;} for non IE browsers</h2> 
  6.         <p>This div has a min-width of 300px and a width of 50%.<br /> 
  7.         The width can be any percentage and the min-width a px or em value.</p> 
  8.       </div> 
  9.     </div> 
  10.   </div> 
  11. </div> 
  12. <div class="rule">this is 300px wide</div> 

步骤2的演示(Demo)

这表明现在文字占据了暗红色边界区域,同白色区域一样拥有50%的宽度.但是如果改变窗口的大小,你会发现我们回到了起点,内容content依然与继续缩小直到超过300px.

这个的发生是因为IE的渲染BUG，造成了附加的div的'hasLayout'属性为false. (see Microsoft hasLayout property for further information).

步骤3

这里有很多种方法来重新触发'hasLayout'，但是最普通、最简单的方法是'Holy Hack'，就是给div一个(height:1px;)的属性.

The CSS

  1. /*\*/ 
  2. * html .minwidth, * html .container {  
  3.  height: 1px;  
  4. }  
  5. /**/ 

在.minwidth和.container 2个div上应用这个CSS HACK.

围绕的字符 /*\*/........./**/ 是用来隐藏样式在 Macintosh  IE5，据我所知，这个功能没有问题.

步骤3的演示(Demo)

减小浏览器窗口现在会减少所有宽度，直到达到最小宽度然后停止在300px.但是这个会引发一个问题，就是那些占据红色边界区域的字符会消失在红色边界区域不见，只有出现在白色区域上方的文字才可见.

步骤4

Another problem and another solution. If I give the container div a relative position then the text will reappear in front of the dark red border.
The CSS

  1. * html .container {  
  2.  margin-left:-300px;  
  3.  position:relative; /* ADDED */ 
  4. } 

步骤4的演示(Demo)

经过上面的调整，我们已经使得所有的文字在50%的div中可见，并且已经实现了跨浏览器的min-width功能》

步骤5

剩下来的工作就是改变边界的颜色为白色一边内容区域div呈现白色背景.

The CSS

  1. * html .minwidth {  
  2.  border-left:300px solid #fff; /* CHANGED */ 
  3. } 

步骤5的演示(Demo)

我们现在有一个完全有效的方法来在IE中模拟使用min-width，并且我们可以在这里完成，但是这里依然有个限制，那就是我们需要一个背景颜色来完成这个工作.这是因为IE没有border的'transparent'选项.

步骤6

如果我们需要有一个背景图片通过min-width div来显示，那么上述的方法将不适合.幸运的是，有一个替代方案，将解决这个问题，只需要一个额外的div来完成这个工作.如果，不使用左边界宽度来控制min-width的话，我们将使用左填充宽度取代，并且我们不需要为任何一个div制定颜色下面是CSS代码

  1. .width {  
  2.  width:50%;  
  3.  min-width:300px; /* CHANGED TO REMOVE BACKGROUND COLOR */ 
  4. }  
  5. * html .minwidth {  
  6.  padding-left:300px; /* CHANGED MARGIN TO PADDING */   
  7. } 

步骤6的演示(Demo)

现在你可以看到背景图片通过div显示，但是，大家会发现，这种方法（当浏览器窗口缩小时）不会停止在最小宽度，因为IE将缩小填充padding宽度.

步骤7

这里有个附件div（class="layout"）用来防止padding的缩小.

The (X)HTML

  1. <div class="width"> 
  2.   <div class="minwidth"> 
  3.     <div class="layout"> 
  4.       <div class="container"> 
  5.         <div class="content"> 
  6.           <h2>{width:50%; min-width:300px;} for non IE browsers</h2> 
  7.           <p>This div has a min-width of 300px and a width of 50%.<br /> 
  8.           The width can be any percentage and the min-width a px or em value.</p> 
  9.         </div> 
  10.       </div> 
  11.     </div> 
  12.   </div> 
  13. </div> 
  14. <div class="rule">this is 300px wide</div> 

附加的CSS将会添加到类为.layout 到hasLayout 列表中.

The CSS

  1. /*\*/ 
  2. * html .minwidth, * html .container, * html .content, * html .layout  {  
  3.  height:1px;  
  4. }  
  5. /**/ 

步骤7的演示(Demo)

现在你会看到一个充分的、可用的IE min-width 演示，这个演示含有透明背景.

步骤8

另外一个可能的要求就是让所有的宽度容器在页面上居中.这个不算问题，而且可以使用普通的方法'text-align:center' for IE 并且 'margin:0 auto;' for non IE Browers 对外层div.居中的div,一个含有背景颜色，一个含有透明背景在下面的例子中可以看到.

Example of centered divs

你会注意到我使用了.width {display: inline-block;} 在这个版本里面，来给外层的容器宽度hasLayout属性.这个是另外一个可替代方案来实现在IE中的hasLayout应用.

结论
我希望本教程是一种折衷的，并且您同意这一方法优于JavaScript或表达式（即使它使用了一些额外divs来完成的结果）。高兴的是，当Internet Explorer7今年晚些时候推出，它必须支持最小宽度;如果没有，当设计师们开始使用min-width来布局，这种方法的实现最小宽度在早期版本的Internet Explorer将变得更重要。

I hope that this tutorial was relatively painless and that you agree that this method is superior to JavaScript or expressions (even though it usesa few extra divs to accomplish the results). Hopefully, when Internet Explorer 7 is released later this year it will have support for min-width; if itdoes this method of achieving min-width in earlier versions of Internet Explorer will become more relevant as web designers start to use it with their layouts

原文标题：How to Use CSS to Solve min-width Problems in Internet Explorer
原文作者：Stu Nicholls
原文出处：http://www.webreference.com/programming/min-width/

翻译者：Liupeng.us

]]> http://www.liupeng.us/min-width-Cross-browser-method-with-css-xhtml/ HTML/CSS/JS 2009-01-30 22:02