Firefox 和 chrome 上的不同布局

Question

我正在开发一个网站，其中 header 有购物车按钮和搜索栏。

我的问题是在 chrome 和 firefox 中，您会在购物车按钮和搜索输入之间看到不同的空格。 Chrome 版本应该是正确的布局。有什么建议么？感谢帮助。

body {
  background: #000000;
}
img[alt="cart-icon"] {
  width: 20px;
}
img[alt="telephone-icon"] {
  /*width: 18px;*/
  margin-top: -4px;
  margin-right: 3px;
}
.right {
  float: right;
  text-align: right;
  margin-top: 21px;
}
.tel-no {
  color: #fff;
  margin-top: -7px;
  margin-right: 19px;
  font-weight: normal;
  text-align: right;
  font-size: 15px;
  font-family: avenirreg;
}
.tel-no p {
  margin-bottom: 0;
  display: inline;
}
.cart1 {
  float: right;
  margin-top: 9px;
  margin-right: 7px;
}
.top-cart .truncated {
  display: none;
}
.header-search-form {
  float: right;
}
.right input[type='text'] {
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #7B7672;
  border-radius: 0;
  width: 125px;
  height: 21px;
  padding-left: 5px;
  margin-right: -19px;
  color: #ccc !important;
}
.right input[type='text']:focus {
  outline: none;
  background-color: #444;
}
.right button[type='submit'] {
  position: relative;
  border: none;
  /* background-size: 19px; */
  background-size: 15px;
  height: 25px;
  width: 25px;
  background: rgba(0, 0, 0, 0) url('../images/ico-search.png') no-repeat center center;
  left: -11px;
  top: 6px;
}
/* firefox*/

@-moz-document url-prefix() {
  .header-row-1 button[type='submit'] {
    position: relative;
    border: none;
    /* background-size: 19px; */
    background-size: 15px;
    height: 24px;
    width: 25px;
    background: rgba(0, 0, 0, 0) url('../images/ico-search.png') no-repeat center center;
    left: 0px;
    top: -25px;
  }
}
.header-row-1 button[type='submit']:hover {
  background-color: #ED1B24 !important;
}
.cart-label {
  background-color: red;
  color: #fff;
  /* border-radius: 11px; */
  padding: 2px 4px;
  font-size: 9px;
  position: relative;
  top: -9px;
  left: -11px;
}

<div class="right">
  <div class="tel-no">
    <img src="http://www.encorediamond.co.uk/skin/frontend/ecd/default/images/common/telephone-icon.fw.png" alt="telephone-icon">
    <p><span>015395 67957</span>

    </p>
  </div>
  <div class="cart1">
    <a href="#header-cart" class="toggle-minicart skip-link skip-cart">
      <!--<img src="" alt="cart-icon">
                    <span class="cart-label">5</span>-->


      <img src="http://www.encorediamond.co.uk/skin/frontend/ecd/default/images/common/cart-icon.fw.png" alt="cart-icon">
      <span class="cart-label">
                        0                    </span>
    </a>

  </div>
  <div class="col-lg-4 col-md-5 col-sm-5 col-xs-12 top-cart" style="display: none">
    <div class="header-minicart">
      <a href="#header-cart" class="skip-link skip-cart  no-count">
        <!--<span class="icon"></span>
    <span class="label"> ( </span>
    <span class="count"> )</span>-->
      </a>

      <div id="header-cart" class="block block-cart skip-content">
        <div id="minicart-error-message" class="minicart-message"></div>
        <div id="minicart-success-message" class="minicart-message"></div>
        <div class="minicart-wrapper">
          <p class="block-subtitle">Recently added item(s) <a class="close skip-link-close" href="#" title="Close">×</a>

          </p>
          <p class="empty">You have no items in your shopping cart.</p>
        </div>
      </div>
    </div>
  </div>
  <form id="search_mini_form" action="http://www.encorediamond.co.uk/catalogsearch/result/" method="get">
    <div class="header-search-form">
      <input kl_virtual_keyboard_secure_input="on" autocomplete="off" id="search" name="q" value="" class="input-text" maxlength="128" type="text">
      <button type="submit" title="Search" class="button"></button>
      <div style="display: none;" id="search_autocomplete" class="search-autocomplete"></div>
      <script type="text/javascript">
        //<![CDATA[
        var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
        searchForm.initAutocomplete('http://www.encorediamond.co.uk/catalogsearch/ajax/suggest/', 'search_autocomplete');
         //]]>
      </script>
    </div>
  </form>
  <!-- <div class="navbar-toggle collapsed mobile-expand" data-toggle="collapse" data-target=".navbar-collapse"></div>--></div>

Answer 1

你应该使用（已编辑）

#search_mini_form {
    float: right;
    margin-top: 9px;/*Same as .cart1*/
}

而不是

.header-search-form {
    float: right;
}

并将 position:relative 替换为 float:right; 以获得 .right button[type='submit']:

.right button[type='submit'] {
    float:right;
    border: none;
    /* background-size: 19px; */
    background-size: 15px;
    height: 25px;
    width: 25px;
    background: rgba(0, 0, 0, 0) url('../images/ico-search.png') no-repeat center center;
    left: -11px;
    top: 6px;
}

#search_mini_form 是包含您的 input 的元素，它是您的 .cart1 元素的兄弟元素。因此，如果您想使用 float 设置您的布局，您想要定位的元素必须是兄弟元素。这就是为什么我将 float属性设置为输入的父元素，它是 .cart1

的兄弟元素

Exemple

Answer 2

请在您的 CSS 中包含以下内容此样式仅适用于 firefox 您只能为 firefox 提供边距底部

@-moz-document url-prefix() {
.cart1 {
margin-bottom: 5px;

}

Firefox 和 chrome 上的不同布局

Different layouts on firefox and chrome

html

css

firefox

google-chrome