html - CSS 浏览器兼容性问题 -

Question

在我的 HTML 中，我有这个表格设置，它由每个表格单元格的单独图像组成。我在 div 的底部有一个 < hr/> 中断，将表格与其余内容分开。当我在 Chrome 上测试时它显示正确，但是在 Firefox 中换行符没有正确对齐，它被推高了几个像素。

第二个问题是图像。在第二个和第三个表格单元格之间，有一个空白间隙，大约 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;
}

Answer 1

我必须说我不太喜欢对非表格数据使用表格，列表可能更适合这里。然而，这不是问题。

hr 的实现非常依赖于浏览器，因此我很少使用它(等到你开始在 IE 中测试......)。我的建议是用类为 .hr 的 div 替换它，并根据您的意愿在 css 中设置样式。

一个例子:

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

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

如果您对默认边框不满意，您甚至可以使用小图像并沿 x 轴重复。不过，在这种情况下不要忘记给您的 div 一些高度。

至于图像之间的差距，我没有立即解释。也许它与实际图像有关，顶部或底部可能有一些透明像素。不过，如果没有实际图像，很难分辨。