关于布局中基线对齐的说法

这个起源于帮忙解决一个运营页面，这个悲剧啊，页面的布局就是下面这样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<pre lang="html4strict">
<html>
<head>
<title>yeahxj</title>
</head>
<body>
  <table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
        <img width="728" height="90" src="http://www.d2forum.org/d2/5/assets/img/d2_728x90.jpg" />
      </td>
     </tr>
    <tr>
      <td>
        <img width="728" height="90" src="http://www.d2forum.org/d2/5/assets/img/d2_728x90.jpg" />
      </td>
     </tr>
  </table>
</body>
</html>
</pre>

简单吧，简单不过了，甚至在我们页面中都鄙视这样的布局，但是不从这个角度出发，我们发现这挺怪异。
Firefox，Chrome下挺好，而IE却会在两张图片中间出来一条白色的间隙。
我明明设置了cellpadding=”0” cellspacing=”0” border=”0”，奇怪了…
网上查完，解决方法有二：

  1. td img {display: block;}
  2. td img {vertical-align: bottom;}
    可是这是为什么呢？为什么这样设置就了可以了，这两个方法不就是把元素从inline变成了block，改变了垂直对其方式。
    后来慢慢baidu，baidu不行Google…发现vertical-align默认值是baseline。以此引出一个概念：

基线对齐
所谓基线对齐，就是各种inline元素都保持其基线与其父元素的基线是对齐的。例如如果有图片的话，则图片的底端也会贴着父元素的基线。
基线这个东西还要从文字设计开始讲起，MD，这博客要写到神马时候啊。还是看代码吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<pre lang="html4strict">
<html>
<head>
<title>yeahxj</title>
</head>
<body>
  <table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
        aAg<img width="728" height="90" src="http://www.d2forum.org/d2/5/assets/img/d2_728x90.jpg" />
      </td>
     </tr>
    <tr>
      <td>
        Aga<img width="728" height="90" src="http://www.d2forum.org/d2/5/assets/img/d2_728x90.jpg" />
      </td>
     </tr>
  </table>
</body>
</html>
</pre>

仔细看仔细看，看到没看到没，其实图片是和a这个字母的下沿对齐的，小时候学字母的时候就会有这条线，不过也有些小写的字母如gg是会超出基线的。所有大写字母都是底部基线对其的。
这大部分已经说到了上面的问题，既然有基线对齐这回事情，那vertical-align必然和这个相关，一看vertical-align的值：baseline sub supper top text-top bottom text-bottom middle以及各种长度值（%，em，ex等等）MD，这博客要写到神马时候啊。还是自己看代码吧。

最后：其实非常多有关布局的情况都是和这个有关，写的不够系统，望有高人指点。欢迎参加D2。