只在Firefox中排隊的邊框圖像和CSS圖像

我有一個表格，其中的單元格都有一個1px的上邊框，除了第一列，它具有用於複製1px底邊框的背景圖像（邊框漸變在左邊）。在所有瀏覽器（Chrome，Safari，IE6 +）中，「假邊界」與「真實邊界」排列在一起 - 除了在Firefox中假邊界太低的情況。如果我手動將圖像向上移動1px，它將完全消失。只在Firefox中排隊的邊框圖像和CSS圖像

我想Firefox會以不同的方式處理額外的1px邊框。如果在沒有邊框的單元格旁邊有一個邊框單元格，Firefox似乎會留下邊框應該放置的空間，而其他瀏覽器將無邊框單元格擴大1px，因此我的圖像可以佔用該空間。（我希望這是有道理的！）

有沒有人知道這個問題的解決方法？

工作例如：http://resonantmind.net/temp/compare.php

來源

2012-02-05 zenkaty

您的代碼或示例會很有幫助。 – j08691 2012-02-06 01:29:58

添加了代碼和屏幕截圖。 – zenkaty 2012-02-06 03:11:48

你能鏈接到實際的頁面嗎？示例代碼似乎沒有表現出相同的行爲。 – j08691 2012-02-06 03:18:06

我試過-1px很好，但我設置高度爲50px。不完全是你想要的，但似乎是在正確的道路上。

.compare .item { 
    background:#fcfcfc url(bg-compare-item.gif) no-repeat 0 -1px; 
    height:50px; 

    /* original */ 
    text-align:left; line-height:29px !important; border:0; 
}

2.另一個解決方案是頂部線移位所述圖像上向下1px的和完全除去底線。然後在CSS中有-1px，你會得到想要的結果。在Chome，IE9和Firefox中看起來不錯。

來源

2012-02-07 02:30:25 JSuar

我無法讓您的解決方案適用於所有瀏覽器，因此我使用了與Firefox特定規則類似的東西（我正在使用一個JS，它根據你加載頁面的瀏覽器在正文中添加一個類）。謝謝！ – zenkaty 2012-02-07 06:38:24

對不起，我找不到一個完整的解決方案。很高興我能幫上忙，你找到了一個可行的解決方案。順便說一句，你應該發佈你的解決方案，以便其他人可以使用它，如果他們遇到同樣的問題。 – JSuar 2012-02-07 15:48:52

我的解決方案涉及更改Firefox和IE的圖像，以便該線位於圖像的底部而不是頂部。有點哈克，但它的工作。 – zenkaty 2012-06-13 01:14:51

只在Firefox中排隊的邊框圖像和CSS圖像

回答

相關問題