Firefox呈现两个重叠的图像，略有高度差异

Question

我正在为我的网站构建标题。左侧是徽标，图像底部有下划线。然后我使用另一个图像镶嵌下来继续下划线到屏幕的右侧。您可以在 http://www.phoenixwebdev.com.au/看到。

问题是在Firefox中，两个图像中下划线的高度通常略有不同。这两个图像是完全相同的高度，两个png，都是从相同的photoshop文件输出的。在Chrome，IE，Opera和Safari中，下划线始终是完全相同的高度。下面是一个神器发生的图像。

这是两张图片。

和

在Firefox中更改浏览器窗口大小时，此效果将显示和消失。

我使用过css的几个方面，包括height，max-height，position，vertical-align。我还尝试从其中包含<a>标记的徽标无效。当非徽标图像作为父元素的背景而不是<img>存在时，会发生同样的情况。

标题HTML代码：

<div class="top-info">
             *top search bar code removed for brevity*          
</div>
    <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
    <img src="http://www.phoenixwebdev.com.au/wp-content/themes/boston-child/images/phoenix-header-border.png" style="">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="http://www.phoenixwebdev.com.au">
        <img src="http://www.phoenixwebdev.com.au/wp-content/themes/boston-child/images/phoenix-logo.png" alt="PhoenixWeb">
    </a>    
</div>
<div class="triangle visible-md visible-lg">
</div>
    <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
    <img src="http://www.phoenixwebdev.com.au/wp-content/themes/boston-child/images/phoenix-header-border.png" style="position: absolute; width:100%; height:80px;">
    <ul id="nav" class="nav navbar-nav navbar-right"><li class="menu-portfolio"><a href="http://www.phoenixwebdev.com.au/portfolio-4-columns/">Portfolio</a></li>
        *nav items removed for brevity*
</ul>    
</div>             

CSS有点复杂，因为这是WordPress，我正在使用子主题。我可以在以后添加这个，如果没有人有答案而没有看到它在这里总结。如果有人能对这个问题进行一些启发，那将非常感激！

Answer 1

我无法在我的Firefox上看到问题，但您可以尝试不在我的<img />标记之后添加换行符，因为我知道它有时会增加不必要的和意外的差距。

Answer 2

问题是你的CSS和这两个图像的混合。

根据提供的网址检查您的网站时，您可能会将图片缩小到80px高。这些图像的原始高度为295px，295/80为3.6875。这导致浏览器必须计算不均匀的像素，这是问题的来源。理想情况下，除非您试图容纳视网膜设备，否则您的资产应该与您尝试显示它们的高度相同。

我建议将photoshop中的实际图像调整为80px高。

Answer 3

我发现引起轻微高度变化的原因是我在标题的宽度上拉伸了“下划线”图像。似乎在Firefox中水平压缩或拉伸图像会影响它在垂直方向上的渲染方式。

通过用与屏幕一样宽的图像替换下划线图像并且不进行拉伸，这两个图像排列良好。