这东西好，收藏品，得慢慢看。

Zen Coding: 一种快速编写HTML/CSS代码的方法

例如，页面插入PNG的透明图，需要用JS来控制透明，烦是需要JS来渲染的文字或图片

当页面不显示这些元素时，这些元素无法被渲染，是个很头疼的事。嗯，头有点大。用visibility呀。这个东西好，但就是占地儿。

都不知道有多久這麼認真地看一个问题这么久了，今天光看这个就看了一下午，但是无解，余同学一句话，全部搞定，牛啊。以前看东西，不求甚解，最后总是抓瞎。以前关于文字的省略号问题，因为只有IE支持，而FF不支持，上次看到一文章，说是用背景图片，但另一个人说，怎么也是引用了图片，为何不用:after，但这个只有FF支持哦。也就是说，这个无论如何都要写两遍。。。好麻烦。

其实也没什么太简单的，看了一段JS

<script>    
     //aka makeDesignerHappy(dEl);
      function breakWord(dEl){
       
       
        if(!dEl || dEl.nodeType !== 1){
         
          return false;
       
        } else if(dEl.currentStyle && typeof dEl.currentStyle.wordBreak === ’string’){
         
          //Lazy Function Definition Pattern, Peter’s Blog
          //From http://peter.michaux.ca/article/3556
         
          breakWord = function(dEl){
            //For Internet Explorer
            dEl.runtimeStyle.wordBreak = ‘break-all’;
            return true;
          }
         
          return breakWord(dEl);
        
        }else if(document.createTreeWalker){
      
          //Faster Trim in Javascript, Flagrant Badassery
          //http://blog.stevenlevithan.com/archives/faster-trim-javascript
         
          var trim = function  (str) {
            str = str.replace(/^\s\s*/, ”);
            var ws = /\s/,
            i = str.length;
            while (ws.test(str.charAt(–i)));
            return str.slice(0, i + 1);
          }
                    //Lazy Function Definition Pattern, Peter’s Blog
          //From http://peter.michaux.ca/article/3556
                   breakWord = function(dEl){
           
            //For Opera, Safari, and Firefox
            var dWalker = document.createTreeWalker(dEl, NodeFilter.SHOW_TEXT, null, false);
            var node,s,c = String.fromCharCode(’8203′);
            while (dWalker.nextNode())
            {
              node = dWalker.currentNode;
              //we need to trim String otherwise Firefox will display
              //incorect text-indent with space characters
              s = trim( node.nodeValue ) .split(”).join(c);
              node.nodeValue = s;
            }
            return true;
          }       
          return breakWord(dEl);
          
        }else{
          return false;
        }
      }
    </script>

另一种是加样式

<style type=”text/css”>
.wordbreak{word-wrap:break-word;word-break:break-all;-moz-binding: url(’wordwrap.xml#wordwrap’); overflow:hidden;}
.box {width:300px; background:#FF9999; border:1px #FF6699 solid;}
</style>

‘wordwrap.xml：

<?xml version=”1.0″ encoding=”UTF-8″?>
<bindings xmlns=”http://www.mozilla.org/xbl” xmlns:html=”http://www.w3.org/1999/xhtml“>
<binding id=”wordwrap” applyauthorstyles=”false”>
<implementation>
  <constructor>
   //<![CDATA[
  
   var elem = this;
   elem.addEventListener(’overflow’,
    function()
    {
     var exp = /<&#8203;\/*[&#8203;_\s=”‘\w]+>/g;
    
     var txt = elem.innerHTML;
     var chars = txt.split(”);
     var newTxt = chars.join(’&#8203;’);    
     newTxt = newTxt.replace(exp, reconstructTag);    
     elem.innerHTML = newTxt;
    },false);
    
    function reconstructTag(_tag)
    {
     return _tag.replace(/&#8203;/g, ”);
    }
   //]]>
  </constructor>
</implementation>
</binding>
</bindings>

JS通用，下面的方法只适应于一个单独的标签里面有长数字或字母的，如果标签里还有标签。他也是会解读出来的。

偶尔发现的，在FF下就没问题，但在IE下就会失真，这个方法只能解决IE7下的，IE6还是依然我行我失真。

当某一处插入一张图片，然后给图片一个相对于本身小一点的宽和高时，在IE下这图片真是没法看了。给图片加个style:-ms-interpolation-mode: bicubic;

但这么多IE6用户，IE7啥时候才能普及，IE7不能统一天下一天，这个也多大用处。虽然很火星。

/*style

<style type=”text/css”>
*{ padding:0; margin:0;}
.ele_inline_block {display: inline-block; display: -moz-inline-stack; *display: inline; zoom: 1; vertical-align: middle; position: relative;}
</style>

 /*html

<div style=”height:200px; width:300px; border:1px dashed #000;”><p class=”ele_inline_block”>霄茵非功轼示功法拉霄茵非功轼示功法拉霄茵非功轼示功法拉霄茵非功轼示功法拉霄茵非功轼示功法拉霄茵非功轼示功法拉霄茵非功轼示功法拉霄茵非功轼示功法拉霄茵非功轼示功法拉霄茵非功轼示功法拉霄茵非功轼示功法拉霄茵非功轼示功法拉</p><span class=”ele_inline_block” style=”height:200px; width:0; overflow:hidden;”></span></div>

/*JS 

<script type=”text/javascript”>
function showcode(a) {
 document.getElementById(”code”+a).style.display = document.getElementById(”code”+a).style.display == ‘block’?'none’:'block’;
 document.getElementById(”content”+a).title = document.getElementById(”content”+a).title == “显示此区域模块代码”?”关闭此区域模块代码”:”显示此区域模块代码”;
 document.getElementById(”code”+a).value = document.getElementById(”content”+a).innerHTML.toLowerCase();
 }
</script>

/*html 

<div id=”content1″ class=”curpoi” onclick=”showcode(1)” title=”显示此区域模块代码”></div>
<textarea id=”code1″ cols=”80″ rows=”10″ style=”display:none;”></textarea>

早上李晓问了一个问题，不用JS而用CSS来判断一个鼠标划过图片放大的效果。。

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
<style type=”text/css”>
*{ padding:0; margin:0;}
a img{ height:80px; width:100px; display:block;zoom:1; }
a:hover img{ height:225px; width:310px;}
</style>
</head>

<body>
<a href=”#”><img src=”http://img1.mtime.com/mg/2009/12/f033da20-7f41-48f9-a562-8465f6ea862c.jpg” /></a>
</body>

这么写按理说是没什么问题的，但在IE6下却不行，当然，还是请教了余同学，余同学好厉害啊。

加了一个a:hover{ background-color:#fff;}

引用余同学的原话：关键是你要触发a:hover的haslayout,这个BUG可能跟IE冒泡过程有关，它的改变是从外至内的。如果a:hover本身不发生一些渲染改变的话，它就停止去改变a:hover里面元素的渲染
所以给a:hover加背景色，或者给它zoom或者position:relative都是可以的

前面是一张图片，紧接着是一段文字，文字有汉字也有英文。

在IE6下会出现排列不整齐，如果中英文混排的文字有链接，那么还会出现断行的问题。。。

解决方法

1.当我们是给前面图片一个style为vertical-align:middle，将个这属性去掉，直接给图片一个align=”absmiddle”

2.给后面的文字加一个ZOOM，但我觉得没有上面的实在

3.以前也试过，将字体改成SONG，这样，汉英文排 列就会整齐，但是链接还是会有断行的问题。

这个浏览器很奇怪，就像那个谁说的，safari和opera都是怪胎。

前天一个小BUG，我们需要鼠标放在头像上出现一个弹出框，结果opera却老是显示出一半，很怪异。

最后的通过余同学改一下，将显示和隐藏方式从DISPLAY改成了visibility，当然，因为我的是绝对定位，是可以这么用，不然他虽然不显示，但他还是占地的。

昨天发了新版本，因为有我做的新的频道页，我晚走了，没赶上SW开荒，上线洗了洗天赋就睡觉了，猪一般的存在，第一次加错了，又花了45G洗了第二次。
CQ对于我的十点睡觉非常惊讶，说真的，我在床上躺了很久也没睡着。今天早上听说他们昨晚打黑暗去了，郁闷。
今天早上发生件很有意思的事。
我刚进门就看见一堆人围在测试那，然后他们看到我以后全都冲我笑。
然后产品叫我过去掐了我一把，说：你又没给封面图加链接，再不加我就掐死你。测试也说：你可真是的，这么大意。我很不好意思地坐地回了原位。越想越不对劲。
把产品叫过来说：你怎么不仔细检查产品，还说我。
指着测试说：你更离谱。这么大的错误你都没发现，还说我。