CSS Firefox и Chrome различный вывод высоты

Question

Я читал другие темы, имеющие аналогичную проблему, но ничего, что я там читал, помог. Это моя проблема для этого сайта: http://bit.ly/1gmeHtu

Посмотрите на эту картину синяя часть с увеличительным стеклом:

В Chrome он выглядит идеально. Однако, когда я исправить, вставив высоту CSS, то она будет исправлена ​​в Firefox, но это происходит в Chrome:

Так что я попытался изменить размер шрифта для текста там, но это Didn Не работай. Я пробовал некоторые дополнения, не работал. И теперь я за помощью.

Вот код окна поиска:

    <div class="test_line_1"><?php echo stripslashes(get_option('Pricerr_main_how_it_works_line1')) ?></div> 
      <div class="test_line_2"><?php echo stripslashes(get_option('Pricerr_main_how_it_works_line2')) ?></div> 
      <div class="test_line_3"> 

       <form method="get" action="<?php echo get_bloginfo('url') ?>"> 
       <input type="hidden" value="<?php echo get_option('PricerrTheme_advanced_search_id') ?>" name="page_id" /> 
        <input type="text" name="term1" value="" id="big_search_m" placeholder="<?php _e('Search for services here...','PricerrTheme') ?>" /> 
        <input type="image" src="<?php bloginfo('template_url') ?>/images/search_sel.png" id="search_magnifier" /> 
       </form> 

      </div> 


     </div> 
    </div> 

Вот CSS для всех 3 из этих элементов:

.test_line_3 { 
    margin: 40px auto auto; 
    height: auto; 
    display: inline-block; 
    border: 8px solid rgba(10, 10, 10, 0.8); 
} 

#big_search_m { 
    padding: 12px; 
    border: 0px none; 
    margin: 0px; 
    font-size: 20px; 
    width: 400px; 
    float: left; 
} 

#search_magnifier { 
    float: left; 
} 

Как это исправить?

EDIT: Код окна поиска Без PHP в нем:

<div class="test_line_1"></div> 
      <div class="test_line_2"></div> 
      <div class="test_line_3"> 

       <form method="get"> 
       <input type="hidden" name="page_id" /> 
        <input type="text" name="term1" value="" id="big_search_m" /> 
        <input type="image" id="search_magnifier" /> 
       </form> 

      </div> 


     </div> 
    </div> 

Answer 1

Он работает в обоих браузерах с определенной высотой.

.test_line_3 { 
 
    margin: 40px auto auto; 
 
    height: auto; 
 
    display: inline-block; 
 
    border: 8px solid rgba(10, 10, 10, 0.8); 
 
} 
 
#big_search_m { 
 
    padding: 12px; 
 
    border: 0px none; 
 
    margin: 0px; 
 
    font-size: 20px; 
 
    width: 400px; 
 
    float: left; 
 
    height: 52px; 
 
    box-sizing: border-box; 
 
    background: yellow; 
 
} 
 
#search_magnifier { 
 
    float: left; 
 
    background: url("https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=328&d=identicon&r=PG&f=1"); 
 
    height: 52px; 
 
}

<div class="test_line_1"></div> 
 
<div class="test_line_2"></div> 
 
<div class="test_line_3"> 
 

 
    <form method="get"> 
 
    <input type="hidden" name="page_id" /> 
 
    <input type="text" name="term1" value="" id="big_search_m" /> 
 
    <input type="image" id="search_magnifier" /> 
 
    </form> 
 

 
</div> 
 

 

 
</div> 
 
</div>