0

在我的 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;
}
4

2 回答 2

1

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

hr 的实现非常依赖于浏览器，因此我几乎从不使用它（等到你开始在 IE 中测试......）。我的建议是将其替换为具有 .hr 类的 div 并在 css 中根据您的意愿对其进行样式设置。

一个例子：

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

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

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

至于图像之间的差距，我对此没有直接的解释。也许它与实际图像有关，可能在顶部或底部有一些透明像素。没有实际的图像很难说。

于 2012-08-07T22:10:45.997 回答
0

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

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

并且为了避免单元格和行之间的错误间距问题，我通常会在源代码中的标签之间省略所有空格。是的，读起来很困难，但有些浏览器只是拒绝表现。

于 2012-08-14T21:49:01.553 回答