0

私のjsfiddleはここにありますhttp://jsfiddle.net/pedz/YG3bv/

完全なページはhttp://jsfiddle.net/pedz/YG3bv/14/embedded/result/です

jsfiddle ページを投稿するのはこれが初めての試みなので、失敗した場合はお知らせください。

これを Chrome や Safari で表示すると、小さな三角形の左端の左端のピクセルが、下線の右端のピクセルのすぐ下にあります。これが私が欲しいものです。

Firefox (私は 13 を使用しています) で表示すると、小さな三角形が 2 ピクセル分右に移動します。

IE9 で見ると 1 ピクセル左に移動すると言われました。

私はこれを何日もいじり、主に FF と Chrome を比較しました。さまざまな要素に境界線を追加すると、私の結論のいくつかを決定できます。

FF と Chrome は、親コンテナーの左と下については一致しますが、上と右については一致しません。FF は、Chrome と比較すると、右側に 1 つまたは 2 つの余分なピクセルがあります。そのため、矢印は 1 ～ 2 ピクセル右にあります。

また、foo スパンの周りに境界線を配置すると、FF は Chrome と比較してテキストを 1 ピクセル上に移動するように見えます。FF のディセンダーは、Chrome では境界線に触れていません (またはほぼ触れています)。同様に、Chrome では FF よりもテキストの上 (境界線内) に少し余白があります。私が気にしていないこの特定の問題は... 私が観察したことです。

私が理解しているのは、いくつかの CSS 属性を「リセット」する必要があるということですが、どれが必要なのかまだわかりません。ここでの私の究極の目標は、ブラウザー間でどの CSS 属性が異なるかを理解することです。

私の第 2 の目標は、さまざまなブラウザーで同じ場所に小さな三角形を配置する方法、またはそれを行うための手法を考え出すことです。ブラウザー固有の 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

Firefox の問題を修正しました。

Firefox で修正

Firefox で修正

Fiddler の投稿を更新し、ブラウザー間の互換性のために追加のCSS リセット コードを追加しました。このファイルのローカル コピーを作成するか、既存の 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;
}

この助けを願っています。

于 2012-07-04T15:48:11.603 に答える
0

一見すると、font-size または font-family の値が設定されていないことがわかります。ブラウザごとにコンテンツのデフォルトの font-size や font-family が異なるように見えます。これが、ブラウザによってレイアウトが異なる原因の一部である可能性があります。

編集：

font-size と font-family を追加した後でも、FF と Chrome の違いがわかります。従来のreset.cssを追加しても効果はないようです。違いは主に、CSS レイアウト スタイル (position:absolute など) を HTML テーブル要素 (td など) に適用しようとしたことにあると思われます。その組み合わせは、何をしても予測できない結果をもたらす可能性があります。

于 2012-06-15T21:22:38.250 に答える