CSS在Firefox和Chrome中输出高度不同

Question

CSS在Firefox和Chrome中输出高度不同

css

3

我读了其他类似问题的帖子，但那里的内容都没有帮助到我。以下是针对此网站出现的问题：http://bit.ly/1gmeHtu 请看这张图片，其中蓝色部分有放大镜:

在Chrome中它看起来很完美。然而，当我插入一个高度CSS进行修复时，在Firefox中它被修复了，但是在Chrome中却出现了问题：

因此，我尝试改变文本的字体大小，但那也不起作用。我尝试了一些padding的方法，但也不行。现在我需要帮助。

以下是搜索框的代码：

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

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

- Overloard

好的，Lauromine。我猜最后可能会这么做。不过现在先保持原样。谢谢。 - Overloard

Connexo - 我会尝试按照你说的去做。我对这方面不是很有经验。我会尽力为您清理代码。但是，创建一个演示我的问题的适当的fiddle，我不知道该怎么做。 - Overloard

好的connexo，我已经清理了php代码。希望我做得正确。 - Overloard

在 CSS 中尝试将 test_line_2 和 test_line_3 都设置为 height: 100%，这样它们都会填满 test_line_1 的高度。 - Kevin Ni

我尝试了一下，Kevin Ni，但是它没有起作用。谢谢你的回复。 - Overloard

显示剩余6条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- emmanuel · Accepted Answer

它可以在定义了高度的浏览器中正常工作。

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