top：1px在chrome和FF中的计算方式不同

Question

I was just recently debugging a site SEE HERE , Now if you scroll to the section immediately after the banner , the section with the accodion.

As you can see from the above image that the active tab has a top arrow that faces upwards. the 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;
}

Notice how postion:relative and top:1px are used to cover the border that passes below, giving the impression that the active that has just an arrow and no bottom border. Now this works fine in chrome but in FF there is a small problem the 1px does't quite get the arrow down enough to cover the border and the arrow on the active tab looks like below:

See how the arrow does quite cover the bottom border. What is the solution to this ??

PS i can't used top:2px because then in chrome things look a bit bad.

Answer 1

Actually, this depends on OS-level and browser-level zoom. Looks like your font doesn't actually have bold glyphs, so to apply font-weight: bold , browsers are forced to generate bold glyphs based on normal glyphs and do this differently .

Given that your menu items are inline-block s, you should add vertical-align: bottom to them for their bottom edge's position to be unaffected by rasterization rounding errors and therefore predictable and consistent across browsers:

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

By the way, I would recommend you to get rid of shifting the active link itself by 1px to bottom (ie remove position: relative; top: 1px; from the active link's styles), and use an absolutely-positioned CSS-generated pseudoelement instead:

.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's border-bottom. */
    width: 14px;
    height: 8px;
}

Answer 2

Change your top:1px to top:1.5px it works perfectly fine on both browsers ie Chrome and 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

That is because it displays different different font size for different browser. There is minor difference.

To solve this:

Use:

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

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

Reference link:

The font-weight property sets the weight, or thickness, of a font and is dependent either on available font faces within a font family or weights defined by the browser .

If a font has a bold ("700") or normal ("400") version as part of the font family, the browser will use that. If those are not available, the browser will mimic its own bold or normal version of the font .

Answer 4

you use display inline-block you should add vertical-align:top

add vertical-align: top; this class

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

Answer 5

Remove padding-bottom: 1.25em; from here

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

and add it here,

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

this should solve the padding problem and make it look the same in both Chrome and Firefox.

Answer 6

try this 

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

Give vertical-align: top; to your li element because you are using display: inline-block; while using inline-block we should align vertically to avoid this type of issues.