Question

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

第二个问题是图像。在第二和第三表格单元之间，存在大约2px宽的白色空间间隙，将图像分开。

我不确定这是否是浏览器兼容性问题，但我该如何解决？

http://jsfiddle.net/Fe7DC/ - JS代码

<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一些高度。

至于图像之间的差距，我没有这方面的中间解释。也许它与实际图像有关，可能在顶部或底部有一些透明像素。虽然没有实际的图像但很难说。

Answer 2

通常我会在我的hr元素中添加css样式：

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

为了避免单元格和行之间错误间隔的问题，我通常会省略源代码中标记之间的所有空格。是的，难以阅读，但有些浏览器只是拒绝表现。

CSS浏览器兼容性问题 - <hr />

2 个答案: