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

【问题标题】：CSS Browser Compatibility Issue - <hr />CSS 浏览器兼容性问题 - <hr />
【发布时间】：2012-08-07 21:51:06
【问题描述】：

在我的 HTML 中，我有这个表格设置，它由每个表格单元格的单独图像组成。我在 div 的底部有一个中断，将表格与其余内容分开。当我在 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;
}

【问题讨论】：

标签： html css cross-browser

【解决方案1】：

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

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

一个例子：

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

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

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

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

【讨论】：

这在视觉上很好，但请注意hr 旨在具有语义含义。唉，浏览器是否会强调语义，仍然有待商榷。
（并不是说我自己并不经常使用 DIV。）
你仍然可以添加 hr 并用 css 隐藏它，但我怀疑它有那么大的意义。老实说，我从不使用它，因为跨浏览器的样式很痛苦......
我想从现在开始我会坚持不使用
，看看我是否能找到替代它的方法。感谢您的帮助和建议

【解决方案2】：

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

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

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

【讨论】：