top：1px在鉻和FF中計算方式不同

我剛剛剛剛調試一個網站SEE HERE，現在如果您滾動到橫幅之後的部分，則立即使用該符號。top：1px在鉻和FF中計算方式不同

正如可以從上面的圖像，該活動選項卡具有朝上頂箭頭看到。的CSS代碼如下：

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

通知如何postion:relative和top:1px用於覆蓋，下面通過邊界，給人的印象是具有隻是一個箭頭和無底邊界的活性。現在，這部作品在鉻罰款，但在FF有一個小問題1px的開不完全得到箭頭上下足覆蓋邊框和活動選項卡上的箭頭看起來象下面這樣：

見箭頭如何覆蓋底部邊界。這是什麼解決方案？

P.S.我不能使用top:2px，因爲在鍍鉻物看起來有點不好。

來源

2016-07-23 Alexander Solonik

也許這是圖像。嘗試搞亂頁面上的縮放，看看問題是否能解決問題。當我在Chrome中嘗試這個時，放大一次（'ctrl ++'）就足以使邊框顯示。您可能需要將圖像放大一點。 – TricksfortheWeb

實際上，這取決於操作系統級別和瀏覽器級別的縮放。看起來您的字體實際上沒有大膽的字形，因此要應用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's border-bottom. */ 
    width: 14px; 
    height: 8px; 
}

來源

2016-08-22 23:44:07

我也會選擇僞元素 – HerrSerker

將您的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; 
}

來源

2016-07-23 11:37:13 frnt

我更感興趣的是爲什麼1px在FF中不起作用。 –

這通常會發生，主要是因爲填充某處。 Chrome和Firefox的結果不同，而Chrome和Opera的輸出始終相同。 – frnt

@frnt，這是因爲chrome和opera都是webkit瀏覽器，而firefox是一個gecko瀏覽器。 – TricksfortheWeb

這是因爲它爲不同的瀏覽器顯示不同的字體大小。有微小的差異。

爲了解決這個問題：

使用：

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

而且從.hm-our-products-main-showcase .accordion-list-items > li.active > a

Reference link:

的font-weight屬性除去font-weight: 900;設置的重量或厚度一種字體並依賴於可用的fon t面向字體系列或由瀏覽器定義的權重。

如果字體在字體系列中包含粗體（「700」）或普通（「400」）版本，則瀏覽器將使用該字體。如果這些不可用，瀏覽器將模仿它自己的粗體或正常版本的字體。

來源

2016-08-23 04:51:12 ketan

您使用顯示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; 
}

來源

2016-08-23 12:00:12

從這裏

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

刪除padding-bottom: 1.25em;和其添加在這裏，

.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中看起來都一樣。

來源

2016-08-23 14:02:41

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我們應該垂直對齊，以避免這類問題。

來源

2016-08-29 09:37:08

top：1px在鉻和FF中計算方式不同

回答

相關問題