在Chrome中使用em單元的問題

在Chrome中使用em單元時出現問題（版本31.0.1650.63米）。在Chrome中使用em單元的問題

以下的jsfiddle產生不正確的輸出在Chrome（相較於Firefox或IE的綠框是太大）：

HTML：

<div class="aaa"> 

    <div class="bbb"> 

    </div> 

</div>

CSS：

.aaa { 
    font-size: 0.5rem; 

    width: 30em; 
    height: 30em; 

    background: red; 
} 

.bbb { 
    font-size: 0.1em; 

    width: 15em; 
    height: 15em; 

    background: green; 
}

問題似乎是規則font-size: 0.1em這不會使em縮小10倍。相反，它將em設置爲某個最小值。 font-size: 0.1em和font-size: 0.2em之間沒有區別，因爲它們都小於這個最小值。

這是一個錯誤還是我做錯了什麼？

這個特殊情況可以通過將「bbb」類的所有值乘以10來解決。但在我的情況下，事情更復雜，我需要這個font-size: 0.1em。

我正在使用em單元來構建可伸縮控件。我的控件有根div和多個子元素。這個想法是，所有的值都是使用em設置的，em的運行時大小由根元素的font-size控制。如果一個元素具有定義的字體大小，那麼它將取決於它。

我將不勝感激任何想法或建議！

更新：

這裏有不同的輸出的屏幕截圖我只是講：

enter image description here

來源

2014-01-14 Andrej

無法重現。 Firefox（26），Chrome（31.0.1650.63 m）和Opera（Presto）都將綠色框顯示爲紅色框的四分之一。只有IE9呈現綠色框，因爲它非常小。 – cimmanon

@cimmanon：哪個操作系統？我在FF 26，Windows 7中看到了12x12綠色框。 – 412

我也使用Windows 7。 – cimmanon

由於默認字體大小是em尺寸指的是什麼，你需要聲明一個大小爲了使字體具有通用性，字體。

http://jsfiddle.net/j72aZ/1/

這撥弄全球聲明字體大小爲12像素，然後在瀏覽器普遍對待EM大小是12像素，相對於未申報的大小是用戶的瀏覽器的默認。

這個網站有可能能夠進一步幫助你一些好的材料：

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

來源

2014-01-14 18:46:22 Phlume

你的描述聽起來像是你在談論rem不是他們。 em取決於父元素的字體大小。不過，你的例子在我的例子中修復了問題。其實足以像素設置aaa類的字體大小，而不是使用rem設置它：http://jsfiddle.net/rapik/j72aZ/5/稍後我會做更多的測試:-) – Andrej

@Andrej如果這樣解決方案解決了您的問題，您應該將其標記爲已接受。 –

這是一個事實，即最小字體大小設置爲6像素地板（在Chrome中造成30+） - 你不能選擇一個較低的值。當您將字號設置爲.aaa時，這是沒有問題的，因爲它的計算值是8px。但在.bbb上使用font-size: 0.1em;會導致計算值爲0。8像素 - 並且因爲它是小於鉛丹，實際使用值是6個像素：

http://linenwoods.com/images/dev.png

This bug報告，雖然稍不相關，建議改變最小字體大小設置，以更大的東西，壓制完成，然後將其更改回6px（儘管它似乎不適用於您的示例）。它還提到，在Chrome 27之前，您是once能夠通過-webkit-text-size-adjust: none;解決此問題（儘管從版本27開始已被棄用。）This，有些近期的問題，尋求類似的解決方案，但尚未得到解答。

來源

2014-01-14 19:08:00 412

這是東西！但在Phlume答案後，我嘗試使用像素（「12px」而不是「0.1rem」）設置'.aaa'的字體大小，並且它有所幫助。現在計算的'.bbb'的大小是'1px' ...檢查這個小提琴：http://jsfiddle.net/rapik/j72aZ/5/ – Andrej

@Andrej：'.bbb'的計算樣式仍然顯示6px對我來說（在那小提琴）。 – 412

有趣。我再次檢查，我看到「.bbb」的「1px」（Win Server 2012上的Chrome 31.0.1650.63米）。你有一個小的綠色盒子（像15x15像素）還是一個大的？ – Andrej

正如412所解釋的，這是由於Chrome的最小字體大小爲6px，不過我會補充一點，只有在使用em或rem指定字體大小時纔會使用此字體大小。你可以接受這個限制，或者你可以避開它。

說你的目標的1px的根字體大小時1個EM = 16px的（即大多數瀏覽器），你可能會想使用類似的規則：

html { font-size: 0.0625em } 
.myElem { height: 20em; font-size: 12em; }

正如我前面已經做了（邏輯是你的容器高度需要根據字體大小進行縮放）。在Chrome上，看起來這裏的font-size將等同於預期的12 * 1px = 12px，但高度將計算爲20 * 6px = 300px，使用的最小字體尺寸爲6px，這當然是不可取的。

相反，你可以用下面的辦法：

html { font-size: calc(1em/16); } 
.myElem { height: 20em; font-size: 12em; }

你的根元素（<html>）字號還算給1px時1 em = 16px，但因爲它是在PX，而不是em/rem，最小字體大小規則6px不起作用，並且高度將根據需要等於20px。

來源

2017-08-07 04:11:15 andrewb

使用鈣是很好的！謝謝 – Safareli

在Chrome中使用em單元的問題

回答

相關問題