css - 固定的父div在内容下显示0.4px的空格 - 无法修复它?

时间:2017-01-04 22:28:03

标签: html css

我有这个奇怪的问题,似乎我根本无法解决(到目前为止)。奇怪的是,我之前为导航栏做了几乎完全相同的布局,这是成功的。

在我的导航栏中,我有一个按钮(不是实际的<button>,而是一个<div>,就像一个通过jquery一样)到它的最右边,它有一个背景颜色并扩展了点击。问题是在IE和Chrome的一些分辨率中,这个div下方还有一些白色条纹。此外,这使得在其下方扩展的子div在导航栏中的按钮与其自身之间有一点间隙。这对某些人(或大多数人)来说可能无关紧要,但这让我很生气 - 特别是考虑到我之前已经完成过并使用了几乎相同的CSS。

<div>(更准确地说,它是“快速下载”div)设置为70px的高度和70px的行高,对于它的兄弟姐妹(以及其中一些)也是如此减)。然而,父div显示高度为70.4px,这让我烦恼不已。我尝试了很多“反复试验”的解决方案/尝试,但都没有成功。

编辑: 可以在这里看到问题的图像(我将背景更改为红色以使其更加明显):http://imgur.com/fya0duQ

编辑2: 快速下载div下方的空白区域现在只显示在我的计算机上的IE和Safari中。

编辑3: 问题得到纠正后,网站链接将被删除,因此不再有用。

2 个答案:

答案 0 :(得分:0)

假设您的意思是“快速下载”按钮......

导航栏的高度为75px,按钮的高度为70px,创造了5px高的差距。

导航栏为75px的原因是因为左侧的图片60pxmargin-top: 15px;。如果您希望按钮与导航栏的底部齐平,则可以增加按钮的高度,缩小margin-top的{​​{1}}或降低图像的高度。

有问题的CSS:

<img id="aktie-skat-logo" ...>

答案 1 :(得分:0)

我实际上已经跟踪了我自己的问题 - 然而,只有在不同浏览器上检查问题之后,才能在此处发布。暗示来自我的旧版safari和IE,并没有在Chrome中显示 - 这与&#34; EDIT 2&#34;在原帖中。我发现有些链接比其他链接高0.4px,但只有2/5链接。

问题显然源于使用css ::after选择器将FontAwesome图标插入到具有&#34; children&#34; (子页)。删除此图标或制作这些图标position:absolute后,问题就解决了。

至于使用::after进行这些操作的原因我不知道。 ::after元素有display:inline,所以我认为不应该打破太多。

对不起,我可能浪费你的时间来检查我的问题并回答,但即使我找到了解决方案,但这是一个帮助发布在这里(否则不会发现它) 。我希望这可能在某些方面帮助其他人。