CSS瀏覽器兼容性問題 - <hr />

在我的HTML中，我有這個表格設置，它由每個表格單元格的分離圖像組成。我在div底部有一個< hr />中斷，將表格與其餘內容分開。當我在Chrome上進行測試時，它顯示正確，但是在Firefox中換行不正確，它被推高了幾個像素。CSS瀏覽器兼容性問題 - <hr />

第二個問題是圖像。在第二個和第三個表格單元格之間，存在一個大約2px寬的空白空白區域，用於分隔圖像。

我不確定這是否是瀏覽器兼容性問題，但我該如何解決？

http://jsfiddle.net/Fe7DC/ - 的jsfiddle與代碼

<div class="fade" id="Latest-Stories"> 
       <h3 class="section-header"> Son Xəbərlər </h3> 
        <table id="stories-preview" width="330" height="598" border="0" cellpadding="0" cellspacing="0"> 
          <tr> 
            <td id="tablecell1"><a id="link_1"> <img id="img1" src="NewsBarAZ/Article-Nav-Bar2_01.gif" alt="" /></a></td> 
          </tr> 
          <tr> 
            <td id="tablecell2"><a id="link_2" ><img id="img2" src="NewsBarAZ/Article-Nav-Bar1_02.gif" alt="" /> </a></td> 
          </tr> 
          <tr> 
            <td id="tablecell3"><a id="link_3" ><img id="img3" src="NewsBarAZ/Article-Nav-Bar1_03.gif" alt="" /></a></td> 
          </tr> 
          <tr> 
            <td id="tablecell4"><a id="link_4" ><img id="img4" src="NewsBarAZ/Article-Nav-Bar1_04.gif" alt="" /></a></td> 
          </tr> 
          <tr> 
            <td id="tablecell5"><a id="link_5" ><img id="img5" src="NewsBarAZ/Article-Nav-Bar1_05.gif" alt="" /></a></td> 
          </tr> 
        </table> 
    </div> 
    <hr /> 
#Latest-Stories { 
    width:1000px; 
    height:598px; 
    padding-bottom:36px; 
    background-color:#FFF; 
    padding-left:20px; 
} 
#stories-preview { 
    float:right; 
    border-left:2px groove; 
    border-right:2px groove; 
    border-top:2px groove; 
    border-bottom:1px solid #9A9A9A; 
}

來源

2012-08-07 Elmir Kouliev

我必須說，我沒有使用非表格數據表的忠實粉絲，名單可能會更適合這裏。但是，除了這個問題之外。

hr的實現非常依賴於瀏覽器，因此我很少使用它（等到你開始在IE中測試...）。我的建議是將其替換爲一個.hr類的div，並將其設置爲您在CSS中的願望。

一個例子：

<div class='.hr'></div> 

.hr { 
    padding-top: 5px; 
    border-bottom: 1px solid #000; 
    margin-bottom: 5px; 
}

如果你不喜歡默認的邊界，你甚至可以用一個小圖像，並重復沿x軸。不要忘了在這種情況下給你的div一些高度。

至於圖像之間的差距，我沒有一個imediate解釋這一點。也許它與實際圖像有關，可能在頂部或底部有一些透明的像素。很難說沒有實際的圖像。

來源

2012-08-07 22:10:45 Pevara

這很好看，但請注意'hr'的目的是具有語義意義。不管瀏覽器是否強調該語義，唉，仍然存在爭議。 – 2012-08-07 22:14:45

（不是我經常不經常使用DIV） – 2012-08-07 22:15:36

你仍然可以添加hr並用css隱藏它，但我懷疑它有那麼多的含義。我從來沒有用它來說實話，因爲它是一種風格跨瀏覽器的痛苦... – Pevara 2012-08-07 22:17:10

通常我添加CSS樣式到我小時元素：

line-height: 0.01; 
height: 1pt; 
border: 1pt solid black; 
border-width: 0 0 1pt 0; 
background: transparent;

而以避免出現問題與細胞和行之間的間距的錯誤，我通常忽略從標籤之間的所有空格在我的源代碼。是的，使得閱讀困難，但一些瀏覽器只是拒絕表達。

來源

2012-08-14 21:49:01 OmegaJunior

CSS瀏覽器兼容性問題 - <hr />

回答

相關問題