瀏覽器對準兼容性問題

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範圍內放置邊框時，也會出現FF與Chrome相比將文本向上移動一個像素的情況。在FF中的下行不會觸及邊界，而他們在Chrome中執行（或非常接近）。同樣，Chrome中的文本上方（邊框內）的空白位置比FF中的要多。我不關心的這個特殊問題......它只是我觀察到的。

我的想法是我需要「重置」一些CSS屬性，但我還沒有弄清楚我需要哪一個。這真是我的終極目標......瞭解瀏覽器之間的CSS屬性是不同的。

我的第二個目標是想出一種方法，讓不同瀏覽器中的同一位置上的小三角形......或一種技術來做到這一點。我可以在瀏覽器中添加特定的Javascript來以某種方式推動事物，但從網絡來看，這聽起來像是一個非常糟糕的主意。

預覽：

_{預覽在鉻19}

_{預覽在Internet Explorer 9}

_{預覽在Firefox 13}

Answer 1

這當然是一個非常有趣的場景。

看起來像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的休息沒有問題，但顯然火狐似乎做正確的事（IMO）..雖然它的爭議！ :-)

Answer 2

一眼望去，我看到的是沒有設置字體大小或字體系列值。內容在不同的瀏覽器中似乎具有不同的默認字體大小和/或字體系列，這可能是導致佈局因瀏覽器而異的部分原因。

編輯：

增加字體大小和字體家庭後，我仍然看到FF和Chrome之間的差異。添加傳統的reset.css似乎沒有任何效果。我懷疑這種差異主要來自嘗試將CS​​S佈局樣式（位置：絕對等）應用於HTML表格元素（td等）。無論你做什麼，這種組合可能會有不可預知的結果。

Answer 3

解決了Firefox的問題。

_{修正了火狐}

我與另外CSS重置代碼從here更新您的提琴手後跨瀏覽器的兼容性。製作此文件的本地副本或嵌入您現有的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; 
} 

• 編輯：http://jsfiddle.net/YG3bv/31/
• 全屏結果：http://jsfiddle.net/YG3bv/31/embedded/result/

希望這有助於。