0

我的 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 以一种或另一种方式推动事情，但从网络上看，这听起来是一个非常糟糕的主意。

预览：

在 Chrome19 中预览 在 Chrome 19 中预览

在 IE9 中预览 在 Internet Explorer 9 中预览

在 Firefox13 中预览 在 Firefox 13 中预览

4

3 回答 3

1

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

看起来 Firefox在 <span>之后用三角形渲染了一个不间断的空间 ，这当然不是你的意图。这是因为带三角形的跨度嵌套在另一个跨度内。

您代码中的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）.. 虽然它值得商榷！:-)

于 2012-07-04T22:31:29.427 回答
0

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

编辑：

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

于 2012-06-15T21:22:38.250 回答
0

修复了火狐问题。

已在 Firefox 上修复

已在 Firefox 上修复

我已经用额外的CSS 重置代码更新了你的 Fiddler 帖子，以实现跨浏览器的兼容性。制作此文件的本地副本或嵌入到您现有的 CSS 文件中。

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

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;
}

希望这有帮助。

于 2012-07-04T15:48:11.603 回答