firefox和chrome之间的CSS图像对齐差异答案

【问题标题】：CSS image alignment difference between firefox and chromefirefox和chrome之间的CSS图像对齐差异
【发布时间】：2016-11-17 22:05:04
【问题描述】：

我的图像无法在所有浏览器之间正确对齐：

我想知道这是否是边界问题？

问题：解决此问题的最佳方法是创建媒体查询吗？现在我试图找到一个好的中间立场，但是当在 Safari 移动应用程序上查看时，这几个像素会产生很大的不同。还是有更好的方法来包含.mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2 div 之间的图像？

这是我的相关 HTML：

<div id="officials">                 
            <div class='mnhouse'>                       
                    <div class="membersublist">
                         <div class="memberLink"><span id="mnhouselink">Show District <i class="fa fa-external-link-square"></i></span></div>       
                        <div id='housemember' class='lcc_gis_member'></div>
                        <div id='housedistrict' class='lcc_gis_memberdistrict'></div>
                    </div>
                    <img id='housephoto' class='mnhouse_img' src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt=""/>

            </div>
            <div class='mnsenate'>                      
                    <div class="membersublist">
                        <div class="memberLink"><span id="mnsenlink">Show District <i class="fa fa-external-link-square"></i></span></div>
                        <div id='senatemember' class='lcc_gis_member'></div>
                        <div id='senatedistrict' class='lcc_gis_memberdistrict'></div>
                    </div>
                    <img id='senatephoto' class='mnsenate_img' src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt=""/>                   
            </div>
</div>

这是我的相关 CSS：

#officials img {
    height: 100%;
    min-height: 87px;
    max-width: 65%;
    position: relative;
    top: -56px;
    border:none;
}

.membersublist{
    margin-top:15px;
}
.mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2 {
    height:87px;
    background-color: #e6e6e6;
    border-top: 1px solid #a7a5a6;
    border-right: 1px solid #a7a5a6;
    border-bottom: 1px solid #a7a5a6;
    border-left: 3px solid #a7a5a6;
}

这里是demo，以防我错过任何相关代码（您需要在地图上选择一个点才能打开结果）。

【问题讨论】：

这里的主要问题是您将图像放在文本下方并尝试使用top: -56px 修复它，这将不起作用，因为字体呈现不同并且会影响其元素的高度，因此呈现不同结果。您需要做的是将图像移到左列，将文本移到右列，这样就没有问题了

标签： css image alignment vertical-alignment

【解决方案1】：

问题是您使用负相对定位来尝试对齐。

#officials img {
    ...
    position: relative;
    top: -56px;
    ...
}

基本上，您是相对于文本创建的偏移量来定位它的，永远不能指望它在浏览器中是 100% 一致的。

请考虑将定位添加到 .mnhouse 包装器，然后使用绝对定位来定位图像。

.mnhouse {
    position: relative;
}

#officials img {
    height: 100%;
    min-height: 87px;
    max-width: 65%;
    position: absolute;
    top: 0;
    border:none;
}

【讨论】：