css background-height 使元素溢出

Question

我有一个webpage，我想在其中将头部高度设置为 60 像素，但是它的内部元素不知何故溢出，因此显示不正确。我怀疑徽标的背景以某种方式将高度设置为大于应有的高度。我专门设置background-size: 202px 56px; 和height:56px;。背景图像的原始高度为 250x69px，应将其调整为（自动计算）x56px（或固定为 202x56px 也可以）。

如果显示正确，底部应该有一个小的“边框”，当其对应的顶部元素悬停时变为蓝色。

样式最初是在SCSS 的帮助下编写的Compass 并编译为CSS。我还使用Compass 来生成精灵。我只在网页上提供了CSS 文件。我没有在这里放任何代码，因为它太大（每个文件中有 200 多行）。如果我必须显示SCSS 文件，请告诉我。

我正在编辑的网页可以在这个地址找到：http://stogrebro.com/page-test/

我最初是在 localhost 上创建此网页，因此可能存在一些损坏的链接。如果有什么重要的遗漏，请告诉我。

Answer 1

我对您的页面进行了一些尝试，发现您的<td> 元素的“超高”是由于<td> 内的锚元素的填充。您必须首先将其设置为 0，然后为您正在使用的左右应用其他填充：

#head table td a{ padding: 0px; }

此外，您可以直接将高度设置为 <div id="head"> 并使用隐藏溢出设置它（这也是技巧，但会让 <td> 高度错误）。

#head{ height: 60px; overflow: hidden}

背景尺寸工作正常，不会出错。

希望对您有所帮助。