CSS Firefox and Chrome different height output

Question

I did read other threads having a similar problem, but nothing I read there helped. This is my problem for this website: http://bit.ly/1gmeHtu

Look at this picture the blue part with the magnifying glass:

In Chrome it looks perfect. However, when I fix that by inserting a height css, then it gets fixed in Firefox, but this happens in Chrome:

So I tried changing font-size for the text there too, but that didn't work either. I tried some padding stuff, didn't work. And now here I am for help.

Here is the code of the search box:

                 <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>

Here is the CSS for all 3 of these elements:

.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;
}

How do I fix this?

EDIT: The code of the search box Without the PHP in it:

<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

It works in both browsers with defined height.

.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>