浏览器对齐兼容性问题

Question

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

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

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

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

如果使用Firefox查看（我使用的是13），小三角形会向右移动，看起来像是两个像素。

我被告知，当用IE9查看时，它会向左移动一个像素。

我已经花费了很多时间来比较Chrome和FF。如果你为各种元素添加边框，那么你可以确定我的一些结论。

FF和Chrome同意左侧和底部，但他们不同意父容器的顶部或右侧。与Chrome相比，FF右侧有一列或两列像素。这就是为什么箭头是一个或两个像素更右边。

当您在foo跨度周围放置边框时，与Chrome相比，FF会将文本向上移动一个像素。 FF中的下降器在Chrome中执行（或非常接近）时不会触及边框。同样，Chrome中文本（边框内）的空白区域比FF大一些。这个特别的问题我并不关心...这只是我观察过的事情。

我认为我需要“重置”一些CSS属性，但我还没想出我需要哪一个。这真的是我的最终目标......了解浏览器之间的CSS属性有何不同。

我的第二个目标是提出一种方法，将小三角形放在不同浏览器的同一个地方......或者是一种技术来实现它。我可以添加浏览器特定的Javascript来以某种方式推动事物，但是，从网络上看，这听起来真的很糟糕。

预览：

_{在Chrome 19中预览}

_{在Internet Explorer 9中预览}

_{在Firefox 13中预览}

Answer 1

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

在＆lt; span＆gt;之后，看起来Firefox正在呈现不间断的空间 有三角形，这当然不是你的意图。这是因为带有三角形的跨度嵌套在另一个跨度内。

代码中的 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）..虽然它有争议！ ： - ）

Answer 2

乍看之下，我看到的是没有设置font-size或font-family值。内容似乎在不同的浏览器中具有不同的默认字体大小和/或字体系列，这可能是导致布局因浏览器而异的部分原因。

修改

添加font-size和font-family后，我仍然看到FF和Chrome之间存在差异。添加传统的reset.css似乎没有任何效果。我怀疑差异主要来自于尝试将CS​​S布局样式（位置：绝对等）应用于HTML表格元素（td等）。无论你做什么，这种组合都可能产生不可预测的结果。

Answer 3

修正了Firefox问题。

_{已在Firefox上修复}

我已使用其他 CSS重置代码更新了您的Fiddler帖子，以便从here获得跨浏览器兼容性。制作此文件的本地副本或嵌入现有的CSS文件中。

我在/* your CSS starts here */行上面添加了以下CSS重置代码：

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
    margin:0;
    padding:0;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block;
}

• 可编辑：http://jsfiddle.net/YG3bv/31/
• 全屏结果：http://jsfiddle.net/YG3bv/31/embedded/result/

希望得到这个帮助。