我正在开发一个网站,其中的标题包含购物车按钮和搜索栏。Firefox和Chrome上的不同布局
我的问题是在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>
您仍然可以看到电话号码下的空间差异。 –
图片网址错误,所以我看不到真实的结果。但感谢开发工具,我们可以看到telephon-icon在浏览器中的显示效果不一样。为'img [alt =“telephone-icon”]设置一个'height'值'解决电话号码下的空间差异:http://jsfiddle.net/bdrstmu2/ – EdenSource
抱歉但没有进展。它仍然是一样的。你看不到任何图像吗? –