啊，inline-block，挺难琢磨并且迷人的声明上承诺了很多，其实提供了很少。很多次我拿到类似这样的 PSD 文件：
就哭了。

一般说来，这种类型的布局是小菜一桩。固定宽度，固定高度，向左浮动就解决了。但是，这个设计中内容的多少是可变的，这就意味着如果这些块中的一些内容比其他的多，就会破坏这个布局。

因为第一个展示项比其他项高，第五个项目就相对第一个浮动，而不是位于它下面了。基本上我们想要一个弹性表格的布局，但是适当的，语义标记。

我们以一个无序列表开始这个简单的页面，并把 display 设置为 inline-block:

效果在 Firefox 3， Safari 3 和 opera 中看起来没问题：

显然，在垂直排列上有些错误。嗯，也不算错误吧，这是正确的表现，只不过不是我们想要的效果。

这是因为每个

元素的基线是和其父元素

的基线对齐排列的。你要问啥是基线？一图顶千言那：



基线就是横贯上面文本的黑线。尽量说的简单点。inline 或者 inline-block 元素默认的 vertical-align 值 就是基线。也就是说元素基线要和她父元素的基线对齐。下面有一个示例：


就如所看到的，每个基线都是和文本 ‘This is the baseline.’ 的基线对齐的。文本虽然不在

• 内部，但是文本节点的父元素
  就指出了父元素的基线所在。

  总之，修正方法是很简单的： vertical-align: top，这样就能得到一个看起来不错阿网格：

  

  但是在 Firefox 2, IE 6 和 7 中，依然无效：

  

  从 Firefox 2 入手。

  Firefox 2 不支持 inline-block，但是它支持 Mozilla 特有的显示属性 ‘-moz-inline-stack’，这个属性和 inline-block 比较像。把它加在 display: inline-block 之前，FF2 会忽略 inline-block 而保留 -moz-inline-stack，因为它不认识 inline-block。支持 inline-block 的浏览器会使用 inline-block 而忽略之前的显示属性。

  1. li {
  2.     width: 200px;
  3.     min-height: 250px;
  4.     border: 1px solid #000;
  5.     display: -moz-inline-stack;
  6.     display: inline-block;
  7.     vertical-align: top;
  8.     margin: 5px;
  9. }

  不幸的是，有点小bug：
  

  坦白地说，我不知道什么导致了这个 bug。但是有个快速的修正方法。把

  • 中所有的东西用
    包含起来。

    1. <li>
    2.     <div>
    3.         <h4>This is awesome</h4>
    4.         <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
    5.         alt="lobster" width="75" height="75"/>
    6.     </div>
    7. </li>

    貌似

  • 中的内容被’重置’并且正确显示了。
    

    现在，转到 IE 7 上来。IE 7 也不支持 inline-block，但是我们可以欺骗它以使

  • 好像是 inline-block 的。怎么做呢？hasLayout，IE 的一个带来乐趣的神奇属性。你无法在一个元素上用 hasLayout: true; 显示地设置 hasLayout，或通过其他类似的简单方法，但是可以用其他类似 zoom:1 的声明来激发它。

    技术上来说，hasLayout 意味着，一个 hasLayout 设为 true 的元素负责渲染它自己及其子元素(把它和 min-height 和 width 联合起来，就得到了和 display:block 非常相似的效果)。这有点像神奇的精灵粉，把它洒在渲染问题上，问题就消失了。

    当我们给

  • 加上 zoom:1 和 *display:inline(区分 IE6 和 IE7 的星号 hack) 之后，在 IE7 中它们就可以像 inline-block 一样显示了：
    1. li {
    2.     width: 200px;
    3.     min-height: 250px;
    4.     border: 1px solid #000;
    5.     display: -moz-inline-stack;
    6.     display: inline-block;
    7.     vertical-align: top;
    8.     margin: 5px;
    9.     zoom: 1;
    10.     *display: inline;
    11.     }

    

    哇！差不多了，只剩 IE 6 了：

    

    IE6 不支持 min-height，但是多亏它对 height 属性的不正确处理，我们可以用它来代替。把 _height(IE6 下划线 hack) 设为 250px 使所有的

  • 元素高度为 250px，并且如果它们的内容大于 250px，他们会扩大来适应。其他所有的浏览器会忽略 _height。

    现在为止，对所有的浏览器都有效了，这是最终的 CSS 和 HTML：

    1. <style>
    2. li {
    3.     width: 200px;
    4.     min-height: 250px;
    5.     border: 1px solid #000;
    6.     display: -moz-inline-stack;
    7.     display: inline-block;
    8.     vertical-align: top;
    9.     margin: 5px;
    10.     zoom: 1;
    11.     *display: inline;
    12.     _height: 250px;
    13. }
    14. </style>
    1. <li>
    2.     <div>
    3.         <h4>This is awesome</h4>
    4.         <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
    5.         alt="lobster" width="75" height="75"/>
    6.     </div>
    7. </li>

    原文地址: Cross-Browser Inline-Block
    译文地址：跨浏览器的 inline-block

关于清除浮动的方法可以参照上次的博文内联标签的背景图片与清除浮动，算是对清除浮动的补充,列举下使用较多的三种清除浮动的方法：
1.>在要清除浮动后面嵌套空白div 并添加其一个定义好的样式clear。

2.>在要清除浮动的标签里添加样式：overflow:hidden;zoom:1,这么做比第一中方法是减少了很多无意义的标签。而zoom:1的原理是利用了IE的layout（关于layout可以参考http://www.ks-pe.com/article/36.html）
3.>关于第三种方法很多大型门户网站都的这个，与第二中方法类似应该是兼容性更加好一点。

清除浮动的方法很多，选择最适合的就可以。我比较偏向第二、第三种，如果都不好用就采取第一种。

IE 7 列表间距bug

刚刚说了ie的layout触发可以清除浮动bug，但是关于layout的bug也很多。
比如我在工作中遇到的一个IE7产生空白边距的BUG，它的触发条件是：在ul、ol列表项li中存在浮动的标签并且这些li是一行显示就会产生空白间距。

上面的代码理论上是没有任何间距，但是在IE7下会有空白间距，这个是因为overflow:hidden触发了IE的layout产生的。比如将overflow:heidden换成zoom:1问题同样存在。
而解决方法将该li也加上浮动属性（如float：left）。

如果只用”查找和替换”"来查找和替换，那么太可惜了.因为它能做的事情还很多很多……

来自www.ibelieveinadv.com。

很高兴能被邀请参加WEB标准化交流会，而这期的主题是“前端工程师应该如何学习javascript”，说起JavaScript接触有很长一段时间了，但一直一来都是去网上下载现成的代码改一改，一些语法参数的，压根就不去了解。可越来越多的应用及工作，让我不得不去了解她。于是买了本《锋利的jQuery》来学习，虽然我不善于交流,但是毕竟去和此行业内顶尖的高手分享下学习、工作的心得是没有坏处的。

交通还是很方便的，2号线淞虹路5号出口就到了，这里要感谢下携程网提供的会议室。一轮的自己我介绍完，就开始交流的话题，基本上高手们都是从最基础的js基础开始的，书籍一般是《dom编程艺术》和《javascript权威指南》，而高手们都不屑于各种插件的，但是这两本书太厚了，也太细了，我是没有耐心看完这两本，我自己的目标是掌握JQuery库，然后能做到自己做出来的前台能很好完成javascript效果就好了，毕竟我不是吃这碗饭的，底层的JS还是交给大神们。

想通过一次交流会提高自己的JS能力，是不现实的。和大神们交流学到好的学习方法、学习的目标、以及工作的经验 这才是最重要的。也许是javascript的话题比较枯燥吧，居然没有一个MM来，还是比较可惜的，所以激情少了很多，交流会上我还是比较怵的。不知道怎么的，从小就是这样，到人多的地方就比较紧张，到熟人一边就成老油条了，还是见识太少，以后要多参加才是。

周末去了奉贤..上海郊外的风景是非常美丽的…宽阔的郊野，让人顿时释放了工作的压力..特别是万佛阁的附近..似乎也充满了灵气。

瑞云重重让人感觉置身与另外一个世界，四周安静完全与大城市的繁华相近而远.不过适逢重建没能看到旧貌..也没看到完整新貌实属遗憾。

总结一下今天遇到的问题…

1.内联标签添加背景色…如<a>、<span>等..简写代码需要防范隐形杀手“空格”。
如.productlist a{background:url(../images/close.png) 0px 2px no-repeat}是正确的，
而.productlist a{background:url(../images/close.png)0px 2px no-repeat}则IE6不会识别.页面也不会显示如何背景图片..
因为url(../images/close.png) 与0px少了一个空格..
如果内联标签中没有任何内容如：<a href=”#”></a>.即使通过pingding:100px;设置出一个空白区域，在各种ie中还是无法显示..添加一个空格或者&nbsp;即可。

2.清除的浮动的方法：一般是clear:both。但是这样会多出额外无意义的标签，如<div class=”clear”></div>，而overflow:auto;或overflow:hidden;也清除浮动，加上_zoom:1或_height:1% 则是为了兼容ie6。

南非世界杯除了精彩的比赛，裁判的表演也令人大开眼界，开赛以来黄牌红牌满天飞，该罚的伐了，不该罚的也罚了。

更可怜的英国队，却输给了裁判。在关键的2比2逼平的进球中却被判做无效。这给刚刚恢复士气的英格兰队当头一棒。或许这球算进了英格兰也不一定会赢，但是无疑扼杀了英格兰最后的希望…裁判imba!