CSS Firefox 和 Chrome 不同的高度输出

Question

我确实阅读了其他有类似问题的线程，但我在那里阅读的内容没有任何帮助。这是我的网站问题:http://bit.ly/1gmeHtu

用放大镜看这张图蓝色部分:

在 Chrome 中它看起来很完美。但是，当我通过插入高度 css 修复该问题时，它会在 Firefox 中修复，但在 Chrome 中会发生这种情况:

所以我也尝试更改那里的文本的字体大小，但这也不起作用。我尝试了一些填充物，但没有用。现在我在这里寻求帮助。

这是搜索框的代码:

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

这是所有 3 个元素的 CSS:

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

我该如何解决这个问题？

编辑:没有 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>