芳草苑

今天在 css 里遇上一个以前不曾注意的细节：
假设<a>和<img>的 border, margin 和 padding均为0，一个被<a> wrapped 的 <img> (<a><img/></a>) 比单独一个 <img/> 在 Firefox 中 render 要高 3px，在 chrome 和 ie 下也会高一些（但我未测量数值）。

实例代码

<style type="text/css">
a { text-decoration:none; }
a, img { border:0; padding:0; margin:0; }
.col-1 { float:left; text-align:right; width:49%; }
.col-2 { float:right; text-align:left; width:49%; }
.line { height:1px; border-top:1px solid orange; }
</style>

<div class='col-set'>
<div class='col-1'>
<a href="#">
<img src="not-lineup.jpg"/>
</a>
<div class='line'>&nbsp;</div>
</div>
<div class='col-2'>
<img src="not-lineup.jpg"/>
<div class='line'>&nbsp;</div>
</div>
</div>

Inline elements 不等高实例截图

我想了很久才知道这都是因为<a>和<img>是inline elements。Inline elements 有一些特性

• they flow with text.
• they have line-height.
• the element height and width is dependent on the content and will not collapse to the borders of the parent element.

Inline elements 没有 height，在上例中也无法用 line-height 去控制高度：<a>的底部与<img>的底部有 3px 间距，我试遍我能想到的所有 css 属性都无法消除这个间距，除非——

将<a>设为display:block！Block elements 的 border, margin 和 padding 都是有效的，控制高度就不是问题了。

Today I did something CSS cross-browser testing. Here are some of my findings today.

• Validate Xhtml / Html before styling. I put form element between table and tr element which make it an invalid xhtml document and cause CSS rendering in a strange way in IE. (IE is generally bad in W3C standards but this time it is good – it reminds me to validate xhtml.)

• -webkit-border-fit:lines

  is for Sarifi and Chrome only, making elements “shrink”, even block elements.
  > selector can’t be understand by IE6 and under.

• Few people are using IE5.5 or under, so I decide not to bother about layout in IE5.5 or under.
• Block elements have overflow by default to show in IE6, So if I want to set the height of a block element, I need also set

  overflow:hidden

• Cleaning elements with

  clear:both

  to clear floating elements above better be placed inside the same parent element of floating elements, otherwise in IE6, the elements after cleaning elements will not align nicely. for example:

  
  <div class="parent-element">
      <div class="floating-element">...</div>
      <div class="floating-element">...</div>
      <div class="cleaning-element">&nbsp;</div>
  </div>

在网页里，如何让整个表格居中？

我一开始想到的是把<table>嵌套在<div style=”text-align:center”>里，结果发现这样的代码在浏览器里查看表格确实是居中的，但是，同样的代码写成的html邮件表现的就是左对齐（似乎div style=”text-align:center”不起作用）。

为了保证html格式的邮件里的table能居中，我搜寻到了两种方式：

• 直接用table的align属性：<table align=”center”> (但这不符合W3C XHTML 1.0 Strict规范)
• 使用css margin:auto：<table style=”margin-left:auto; margin-right:auto”>