Top: 1px calculated differently in chrome and FF

Question

Recently, I just debugged the SEE HERE site . Now, if you go to the section immediately after the banner, the section with accodion.

As you can see from the above image, the active tab has a top arrow that faces up. css code is as follows:

.hm-our-products-main-showcase .accordion-list-items > li.active > a {
    font-weight: 900;
    position: relative;
    top: 1px;
    background: url(../images/res/active-accordion-tab.jpg) no-repeat center bottom;
}

Please note that postion:relativethey top:1pxare used to cover the border that goes below, giving the impression that the active object has only an arrow and a lower border. Now this works fine in chrome, but there is a small problem in FF: 1px does not have enough arrow to cover the border, and the arrow on the active tab looks like this:

See how the arrow completely covers the lower border. What is the solution to this?

P.S. top:2px, .

Answer 1

, OS . , , font-weight: bold -.

, inline-block s, vertical-align: bottom , :

.hm-our-products-main-showcase .accordion-list-items > li {
    vertical-align: bottom;
}

, 1px (.. position: relative; top: 1px; ) - CSS-

.hm-our-products-main-showcase .accordion-list-items > li.active > a {
    position: relative;
}

.hm-our-products-main-showcase .accordion-list-items > li.active > a:after {
    background: url(active-accordion-tab.jpg) no-repeat;
    content: '';
    margin-left: -7px; /* Half the width to center the arrow. */
    position: absolute;
    left: 50%;
    bottom: -1px; /* Compensating menu border-bottom. */
    width: 14px;
    height: 8px;
}

Answer 2

top:1px top:1.5px, , .. Chrome Firefox.

.hm-our-products-main-showcase .accordion-list-items > li.active > a {
    font-weight: 900;
    position: relative;
    top: 1.5px;
    background: url(../images/res/active-accordion-tab.jpg) no-repeat center bottom;
}

Answer 3

, . .

:

:

.accordion-list-items > li.active {
    font-weight: 900;
    vertical-align: top;
}

font-weight: 900; .hm-our-products-main-showcase .accordion-list-items > li.active > a

:

font-weight , , .

( "700" ) ( "400" ) , . , .

Answer 4

inline-block, vertical-align:top

vertical-align: top;

.hm-our-products-main-showcase .accordion-list-items > li > a {
    color: #000;
    padding-bottom: 1.25em;
    display: inline-block;
    vertical-align: top;
}

Answer 5

padding-bottom: 1.25em;

.hm-our-products-main-showcase .accordion-list-items > li > a {
    color: #000;
    padding-bottom: 1.25em;
    display: inline-block;
}

,

.hm-our-products-main-showcase .accordion-list-items > li.active > a {
    font-weight: 900;
    position: relative;
    top: 1px;
    background: url(../images/res/active-accordion-tab.jpg) no-repeat center bottom;
   padding-bottom: 1.25em;
}

Chrome, Firefox.

Answer 6

try this 

    .hm-our-products-main-showcase .accordion-list-items > li {
      display: inline-block;
      text-transform: uppercase;
      vertical-align: top;
}

vertical-align: top; li, display: inline-block; inline-block, , .