Я разрабатываю сайт, на котором заголовок имеет кнопку корзины и панель поиска.Различные макеты на firefox и chrome
Мой вопрос в хроме и светлячок вы увидите различные промежутки между кнопкой корзины и искать вход. Версия 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>
Вы по-прежнему видите разницу в пространстве по номеру телефона. –
URL-адреса изображений неправильные, поэтому я не вижу истинного результата. Но благодаря инструментам dev мы видим, что значок телефона не отображается одинаково в браузерах. Установка значения 'height' для' img [alt = "phone-icon"] 'разрешает разность пробелов по номеру телефона: http://jsfiddle.net/bdrstmu2/ – EdenSource
Извините, но никакого прогресса. Это все равно. Вы не видите изображение? –