Question

我正在开发一个网站，其中标题包含购物车按钮和搜索栏。

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

＆＃13;

div

＆＃13;

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

＆＃13;

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上的不同布局

2 个答案: