CSS Bildausrichtung Unterschied zwischen Firefox und Chrome

Question

Ich kann meine Bilder bekommen korrekt zwischen allen Browsern auszurichten:

Ich frage mich, ob es eine Grenzfrage ist?

Frage: wäre der beste Weg, dies zu lösen, eine Medienabfrage zu erstellen? Im Moment versuche ich, einen guten Mittelweg zu finden, aber wenn man sie in einer Safari-App betrachtet, machen diese paar Pixel einen großen Unterschied. Oder gibt es eine bessere Möglichkeit, das Bild zwischen den .mnhouse, .mnsenate, .ushouse, .ussenate1, .ussenate2 Divs zu enthalten?

Hier ist meine relevante 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> 

Und hier ist mein relevanter 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; 
} 

Hier ist die demo, falls ich einen entsprechenden Code verpassen (Sie müssen wählen ein Punkt auf der Karte, um die Ergebnisse zu öffnen).

Answer 1

Das Problem besteht darin, dass Sie negative relative Positionierung verwenden, um zu versuchen, eine Linie zu bilden.

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

Grundsätzlich Sie es in Bezug auf die der Text erstellt Offset positionieren, die nie auf gezählt werden kann, 100% konsistent in allen Browsern zu sein.

Erwägen Sie stattdessen, die Positionierung zu .mnhouse Wrapper hinzuzufügen, und verwenden Sie dann absolute Positionierung, um die Bilder zu positionieren.

.mnhouse { 
    position: relative; 
} 

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