字體大小總是大iframe（時間）

我做了一個簡單的網站放置在他人的網站的iframe中。由於某些原因，當內容被放置在iframe中時，字體大小總是很大。字體大小總是大iframe（時間）

在左側，您可以看到它放置在iframe中，在右側加載時沒有iframe。

enter image description here

我有：

body { 
    font-size: 8px; 
}

，以及：因此它們規模根據字體 - （其中，i優選這一個）

body { 
    font-size: 62.5%; 
}

和其它類使用em大小爲身體設置。但在iframe中，這似乎不起作用。

這是我在檢查見：

enter image description here

在計算這32個像素。這可能是16px默認時間2em。如何解決這個問題仍然使用2em設置字體？更重要的是，如果有人知道，是什麼導致了這個問題？

來源

2015-04-15 clankill3r

這似乎是由特定問題引起的。你的'body'的'font-size'聲明被覆蓋，因爲'#header p'更具體，所以它使用'2em'。改變它，看看你如何得到一個。 – jbutler483

是的，但它應該使用當前字體大小設置的'2em'嗎？ – clankill3r

我看你已經在p元素上使用了10px，所以（據我所知），我相信當M爲10px（粗略爲20px）時，字體大小應該是2 * em的高度。你混合了很多單位，這裏（em，px和％），所以很難給你一個簡單的答案。也許閱讀[this]（http://www.w3.org/WAI/GL/css2em.htm）可能會提供一些有關此事的信息？ – jbutler483

這裏的問題是特異性和級聯。檢查員始終按照最具體到最不具體的順序列出選擇器。如果兩個選擇器具有相同的權重，那麼級聯（源順序）將與稍後獲勝的選擇器進行匹配。

例如：

p { 
    color: white; 
    margin: 0 0 1em; 
} 
/* ... bunch of other CSS here ... */ 
p { 
    color: blue; 
} 
/* final rule */ 
p { 
    color: blue; 
    margin: 0 0 1em; 
}

font-size: 62.5%在body用於基本字體大小設置爲從16px到10px（16×0.625 = 10）。您的媒體查詢正在將基本字體大小更改回16px與font-size: 100%，因爲它在文檔的後面發生。

由於ems是你必須在媒體查詢或者不變化font-size到100%（有效去除選擇器）或添加媒體查詢爲#header p改變em值的相對測量。

@media(...) { 
    #header p { 
     font-size: 1.25em; /* 20/16 = 1.25 */ 
    } 
}

來源

2015-04-15 15:56:01 hungerstar

字體大小總是大iframe（時間）

回答

相關問題