css - 浏览器对齐兼容性问题

Question

我的 jsfiddle 在这里 http://jsfiddle.net/pedz/YG3bv/

整页是http://jsfiddle.net/pedz/YG3bv/14/embedded/result/

这是我第一次尝试发布 jsfiddle 页面，所以如果我搞砸了请告诉我。

如果您使用 Chrome 或 Safari 查看此内容，小三 Angular 形左端最左边的像素直接位于下划线最右边的像素下方。这就是我想要的。

如果使用 Firefox 查看(我使用的是 13)，小三 Angular 形会向右移动两个像素。

有人告诉我，当使用 IE9 查看时，它会向左移动一个像素。

几天来我一直在摆弄这个，主要是将 Chrome 与 FF 进行比较。如果你给各种元素加上边框，那么你就可以确定我的一些结论。

FF 和 Chrome 都同意父容器的左边和底部，但他们不同意父容器的顶部和右边。与 Chrome 相比，FF 在右侧多了一列或两列像素。这就是箭头向右移动一两个像素的原因。

与 Chrome 相比，当您在 foo 范围周围放置边框时，FF 也会将文本向上移动一个像素。 FF 中的下降部分在 Chrome 中触及(或几乎触及)边界时不触及边界。同样，Chrome 中文本上方(边框内)的空白区域比 FF 中多一点。我不关心这个特定问题...它只是我观察到的东西。

我认为我需要“重置”一些 CSS 属性，但我还没有弄清楚我需要哪一个。这确实是我的最终目标……了解不同浏览器之间的 CSS 属性有何不同。

我的第二个目标是想出一种方法，让小三 Angular 形在不同浏览器中出现在同一个位置……或者一种实现它的技术。我可以在特定于浏览器的 Javascript 中添加以某种方式插入事情，但从网络上看，这听起来像是一个非常糟糕的主意。

预览:

_{在 Chrome 19 中预览}

_{在 Internet Explorer 9 中预览}

_{在 Firefox 13 中预览}

Answer 1

这当然是一个非常有趣的场景。

看起来 Firefox 在带有三 Angular 形的 之后呈现一个不间断空间，这当然不是您的意图。这是因为带三 Angular 形的跨度嵌套在另一个跨度内。

代码中的 tbody 如下所示:

<td class='upd_apar_def-defect upd_apar_def_dual_button'>
  <span class='foo'>
<a href='some/path' class='upd_apar_def_link'>123456</a><span class='upd_apar_def_span'></span>
  </span>
</td>
<td class='upd_apar_def-apar upd_apar_def_dual_button'>
  <span class='foo'>
<a href='some/path' class='upd_apar_def_link'>987654</a><span class='upd_apar_def_span'></span>
  </span>
</td>

尝试将其替换为以解决问题:

<td class='upd_apar_def-defect upd_apar_def_dual_button'>
  <span class='foo'>
<a href='some/path' class='upd_apar_def_link'>123456</a><span class='upd_apar_def_span'></span></span>
</td>
<td class='upd_apar_def-apar upd_apar_def_dual_button'>
  <span class='foo'>
<a href='some/path' class='upd_apar_def_link'>987654</a><span class='upd_apar_def_span'></span></span>
</td>

CSS 和 DOM 的其余部分没有问题，但显然 Firefox 似乎做了正确的事情(imo)..尽管它值得商榷! :-)