kongxin

今天看到一篇Fixing IE overflow problem，特地翻译一下，是用js技术修补的，上面还提到可以用css来修补，暂时我还不知道，等待查找，先看这篇文章：

直到最近，我才知道IE6/7有overflow问题，但它却是存在；

下面是详细的问题，它已经被我修正了：

问题：

和firefox和safari相比，我刚意识到是IE在overflow方面有一个不同的展现方式；

当在一个元素上应用overflow属性时，特别是火狐等其他浏览器，都在元素的外面显示横向滚动条（horizontal overflow scroll bar）；

你将不会发现这个问题，直到你自己比较它们两者的不同：

你将会注意到这个问题：在IE浏览器里，里面的内容在水平方向溢出（overflow）了，IE里面的解释是：我们在纵向方向也不能完整的看到所有内容，所有它自己产生了一个纵向滚动条（a vertical scroll bar）；

这里有个极糟糕的例子:假如内容区里面只有一行溢出了（它只有一个极微小的纵向滚动条<vertical scrollbar>）,如下：

所以我们的目标是：把横向滚动条（horizontal scroll bar）移到我们溢出内容的外面（outside）;

解决方案：

仅仅发现这个问题是没有任何意义的，纵向滚动条（Vertical overflow）仍然在内容区里面，这个问题仍然存在；如果对于你的溢出（overflow）元素你有一个确定的固定高度的话，你可能会跳过下面的这3个步骤，所以我们的解决方案是在IE里应用下面的这三个步骤：

1. 找到所有的水平方向溢出的元素（Find all elements whose contents is overflowing horizontally.）；
2. 在我们的元素下面添加20px的内边距（padding-bottom）（Add 20 pixels of padding to the bottom of our element）；
3. 剥离纵向滚动条（Strip the vertical scroll bar.）；

据我目前的测试而言，典型的滚动条的高度就是20px;

javascript解决办法：

声明：我所看到的解决这个问题的办法大部分都是通过CSS的方式或者是让浏览器处理这个问题；因为我们仅仅用if/only if在那些元素上面,我们还没有发现高度完美的解决方法能在所有的元素上表现一致(例如：如果我们添加内边距（padding）围绕这个元素，那么当一些块级元素没有溢出时将会出现奇怪的空行<blank line>)；

看这个在线例子(用IE查看)：

window.onload = function () {
  // only apply to IE
  if (!/*@cc_on!@*/0) return;

  // find every element to test
  var all = document.getElementsByTagName('*'), i = all.length;

  // fast reverse loop
  while (i--) {
    // if the scrollWidth (the real width) is greater than
    // the visible width, then apply style changes
    if (all[i].scrollWidth > all[i].offsetWidth) {
      all[i].style['paddingBottom'] = '20px';
      all[i].style['overflowY'] = 'hidden';
    }
  }
};

作为一个jquery插件：

(function ($) {
  $.fn.fixOverflow = function () {
    if ($.browser.msie) {
      return this.each(function () {
        if (this.scrollWidth > this.offsetWidth) {
          $(this).css({ 'padding-bottom' : '20px', 'overflow-y' : 'hidden' });
        }
      });
    } else {
      return this;
    }
  };
})(jQuery);

// usage
$('pre').fixOverflow().doOtherPlugin();

结果：

我们的JavaScript的修补结果使得在IE里符合了在元素下方显示横向滚动条：


下面的是在IE里修补的单行溢出：

下午偶然看到ISD WEBTEAM的关于行高的PPT，非常精彩，但其中有部分PPT已经失效，自己找到没有翻译之前的，对比着看，希望能对这个属性更深入的了解：

一直都听到这个web2.0这个词汇，但是其具体代表的意思还不是很清楚，今天特地搜索了一下，百度百科这里有很详细的解释：

web2.0的特征：

1、多人参与
Web1.0里，互联网内容是由少数编辑人员定制的，比如各门户网站；而在Web2.0里，每个人都是内容的供稿者。
2、人是灵魂
在互联网的新时代，信息是由每个人贡献出来的，各个人共同组成互联网信息源。Web2.0的灵魂是人。
3、可读可写互联网
在Web1.0里，互联网是“阅读式互联网”，而Web2.0是“可写可读互联网”。虽然每个人都参与信息供稿，但在大范围里看，贡献大部分内容的是小部分的人。
4、Web2.0的元素
Web2.0包含了我们经常使用到的服务，例如博客、播客、维基、P2P下载、社区、分享服务等等。博客是Web2.0里十分重要的元素，因为它打破了门户网站的信息垄断，在未来里，博客的地位将更为重要。

无聊中截个图，源自http://www.google.com/prc/report.html，看看google服务在中国大陆还有几个能用，悲哉，我这个重度google使用者：

今天在52css论坛上看到一篇文章，特地记录一下，以用参考，据说是在W3上看到的，我暂时还没找到：