Firefox вызывает смещение вертикально смежных изображений

Question

Я не могу для жизни понять это.

У меня есть два DIVs, уложенных друг на друга, каждый из которых имеет изображение, которое также складывается друг на друга, чтобы создать своего рода двухчастный логотип. Он отлично работает на Chrome и Safari, но по какой-то причине нижнее изображение сбито вправо.

Почти как текстовое обертывание, но я не могу понять, почему это было бы потому, что нет причин, по которым Firefox должен думать, что эти изображения перекрываются.

Chrome Screenshot

Firefox Screenshot

Я работал над этим весь день и не может найти решение, поэтому заранее спасибо за любую помощь.

Соответствующие HTML:

<div id="top_blue"> 
    <div class="imgholder1"><img src="./img/top_half_white.png"></div> 
</div> 

<div id="top_green"> 
    <div class="imgholder2"><img src="./img/bottom_half.png"></div> 
</div> 

Соответствующий CSS:

#top_blue { 
     background: rgb(34,59,141); 
     width: 100%; 
     height: 80px; 
    } 

    #top_green { 
     background: rgb(10,128,55); 
     width: 100%; 
     height: 47px; 
    } 

    #top_blue img, #top_green img { 
     width: 258px; 
    } 

    .imgholder1, .imgholder2 { 
     margin-left: 20%; 
     float: left; 
     overflow: hidden; 
    } 

Answer 1

добавить следующий код в CSS для .imageholder1, .imageholder2

clear: left; 

приятные глазу звезды по пути!

Answer 2

Изменение высоты в 81px на #top_blue исправил проблему в Firefox для меня.

Answer 3

добавить следующее:

#top_green {clear:both;} 

Answer 4

Понадобится:

1. контейнер;
2. clearfix;
3. надлежащее использование поплавков и полей;
4. полный логотип и не разделены (дают мне полное изображение, и я дам вам CSS)

HTML:

<header class='block'> 

    <top class='block'> 
    <div class='container clearfix'> 
     <div id='logo'>&nbsp;</div> 
    </div> 
    </top> 

    <nav class='block'> 
    <div class='container'> 
     <ul class='clearfix'> 
     <li><a href=''>Home</a></li> 
     <li><a href=''>About</a></li> 
     <li><a href=''>Endorsements</a></li> 
     <li><a href=''>Contribute</a></li> 
     <li><a href=''>Contact</a></li> 
     </ul> 
    </div> 
    </nav> 

</header> 

<main> 
    <div class='container'> 
    <div class='red'>some text here</div> 
    </div> 
</main> 

CSS:

* 
{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    box-sizing: border-box; 
} 

li 
{ 
    list-style: none; 
} 

.red 
{ 
    background: red; 
} 

.container 
{ 
    max-width: 800px; 
    margin: auto; 
} 

.block 
{ 
    width: 100%; 
    display: block; 
} 

.clearfix 
{ 
    display: block; 
} 

.clearfix::before, 
.clearfix::after 
{ 
    content: " "; 
    display: block; 
    width: 100%; 
    clear: both; 
} 

top 
{ 
    background: blue; 
} 

top #logo 
{ 
    height: 200px; 
    width: 500px; 
    float: left; 
} 


nav 
{ 
    background: green; 
} 

nav ul { 
    float: right; 
} 
nav ul li{ 
    float: left; 
} 

nav ul li a 
{ 
    display: block; 
    padding: 10px 20px; 
} 

ДЛЯ ЛОГОС:

, если высота логотипа 200px, а высота nav - 50px, чем верхняя высота должна быть 150 пикселей (фиксированная и заявленная высота в .css). Таким образом, логотип будет находиться на панели навигации, но внутри тега.

jsfiddle: https://jsfiddle.net/michmammo93/h8r27oq4/