CSS HTML表格背景颜色溢出答案

【问题标题】：CSS HTML Table background color overflowingCSS HTML表格背景颜色溢出
【发布时间】：2015-02-13 00:44:14
【问题描述】：

我一直在尝试制作一个基于表格的导航栏，该导航栏由 5 个并排的图像组成，当悬停并单击时，使用降低的不透明度来“突出显示” :active 和 :hover 以及浅色背景色。例如

    .navbright {
background-color:#FFC39A;
}
.navbright:hover {
opacity: 0.6;
}

.navbright:active {
opacity: 0.3;
}

问题是背景颜色的实现。它总是比图像低几个像素。我研究过的所有解决方案都没有奏效，即border-collapse:collapse;边距底部：-3px；将所有边框填充间距边距设置为 0 等。

我想找到一个基于消除额外空间/背景空间的表格解决方案。如果这不可能，也许有人可以告诉我如何使用严格的 CSS 而不是表格来构造相同的结构。

我让它“工作”的一种情况是当我使用 div 并将背景颜色设置为 div 类的一部分时，即：

    <td><div class="navbright"><a href="http://www.example.com"><img src="/images/Home.jpg" alt="" width="200"></a></div></td>

但是，使用此解决方案时，在 :active 阶段出现了一条烦人的额外行，此处未解决：CSS HTML line appearing on div :active 更不用说背景图像停止工作的事实...

所以我开始使用表格 bgcolor 来解决它。无论我做什么，我都无法摆脱出现在桌子下方的额外背景颜色。我筋疲力尽，需要专家帮助。这是表格编码：

    <table id="page" align="center" width="1000" height="37">
<tr>
  <td><a class="navbright" href="http://www.criticalawakening.com"><img src="/images/Home.jpg" alt=""></a></td>
  <td><a class="navbright" href="http://www.criticalawakening.com/Articles.html"><img src="/images/Articles.jpg" alt=""></a></td>
  <td><a class="navbright" href="http://www.criticalawakening.com/Forum.html"><img src="/images/Forum.jpg" alt=""></a></td>
  <td><a class="navbright" href="http://www.criticalawakening.com/Store.html"><img src="/images/Store.jpg" alt=""></a></td>
  <td><a class="navbright" href="http://www.criticalawakening.com/Contact.html"><img src="/images/Contact.jpg" alt=""><a></a></td>
</tr>

#page 基本上是试图折叠多余的空间

    #page td {
  padding:0; margin:0;
}

#page {
border-collapse: collapse;
}

感谢任何帮助。而且，如果有人对没有表格的仅 CSS 设计有一个好主意来实现相同的目标，请告诉我。基本上，它是一个 1000 像素宽的居中列。

【问题讨论】：

你能提供jsfiddle sn-p吗？
好吧，我什至无法让小提琴脚本将图像并排排列，但这个想法是没有所有额外背景的较低示例，位于蓝色横幅的正下方：jsfiddle.net/4jx5te1z/3跨度>

标签： html css background html-table space

【解决方案1】：

哇，那是大量的工作。我找到了 a 解决方案，也许不是 THE 最佳解决方案。

首先，我将 TABLE 设置为包含背景颜色，并将其显示为 BLOCK...

    <table style="display:block;position:relative;top:0px;" align="center" height="37" width="1000" bgcolor="#FFC39A" cellpadding="0" cellspacing="0">

我决定用一个简单的内联图像来处理它。我将 IMAGE 设置为 .navbar 类，并将其规则更改如下：

.navbright {
position: relative;
top: 0px;
}

完全从课堂上拿走整个后台任务。将位置设置为相对位置可以让定位更加灵活，即使它们都被 0px 修改了...看图...

在 :active 我的链接周围仍然显示最后一个边框故障，但这是另一个问题...CSS HTML line appearing on div :active

【讨论】：