2015-04-23 6 views
2

Я разрабатываю сайт, на котором заголовок имеет кнопку корзины и панель поиска.Различные макеты на firefox и chrome

fiddle

Мой вопрос в хроме и светлячок вы увидите различные промежутки между кнопкой корзины и искать вход. Версия 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>

ответ

1

пожалуйста включают следующее в вашем CSS, этот стиль будет применяться только для светлячок вас может дать основание рентабельности только для Firefox

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

}

1

вы должны использовать (Edited)

#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

+0

Вы по-прежнему видите разницу в пространстве по номеру телефона. –

+0

URL-адреса изображений неправильные, поэтому я не вижу истинного результата. Но благодаря инструментам dev мы видим, что значок телефона не отображается одинаково в браузерах. Установка значения 'height' для' img [alt = "phone-icon"] 'разрешает разность пробелов по номеру телефона: http://jsfiddle.net/bdrstmu2/ – EdenSource

+0

Извините, но никакого прогресса. Это все равно. Вы не видите изображение? –

Смежные вопросы