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>

CSS Firefox和Chrome不同的高度输出

1 个答案: