發現html5乙個很奇怪的問題,div裡面如果裝著乙個img,會被無故撐高幾個畫素,為什麼?

時間 2021-06-03 05:03:58

1樓:貘吃饃香

瀉藥基本上答差不多了都

我就不廢話了

給個鏈結自己看

RD3020: 在不同的文件模式中,當唯一的非表單控制項類行內替換元素存在於其包容塊中時,其父框的行高並不一定會計算文字基線高度閃

2樓:

題主可以看一下這裡html - html5 vertical spacing issue with <img>

幾乎是題主問題的一種更詳細問答。

我大概看了一下,挺有意思的。我簡單翻譯一下高票答案:

首先,瀏覽器並沒有所謂的"HTML 5 模式",而是只有三種:怪異模式(Quirks),幾乎標準的模式(Limited Quirks)和標準模式(Standards),其中幾乎標準的模式和標準模式之間的唯一差異在於是否對元素給定行高(line-height)和基線(baseline)。幾乎標準模式中,如果標籤所在行沒有其他的行內元素,將不指定基線(baseline),標籤因此會緊貼著父元素底部。

在標準模式中,行框總是會包含類似字母"g","f"尾巴下伸出來的那一部分空間(針對下行字母),即使行框內並沒有任何內容。因此這種情況下你看到的跟父元素底部幾個畫素的間隙實際上就是為」字母尾巴「預留的。

使用 XHTML Transitional Doctype會是瀏覽器執行在」幾乎標準模式(Limited Quirks)」。如果你使用XHTML Strict 或者HTML 4 Strict模式,你將看到和使用HTML 5 模式同樣的間隙,因為這是標準模式(Standards mode)。

我對題主如此細心的發現表示稱讚,當然解決方式很簡單,針對多出來的字母尾巴,設定行高或者字型大小為0,或者設定對齊基線垂直居中,至於display:block,一般我是不太推薦的,因為變成塊元素又得佔一行了……

add對我而言,搬磚過程中凡是涉及到行內元素(包括標籤),為了保證不同標籤的垂直對齊和題主這種問題,都會考慮是否加上合適的vertical-align,一般取值為middle

更新文章為:關於 DOCTYPE 的乙個小發現 - 知乎專欄

3樓:petrus.law

瀏覽器預設的line-height不為0, 如果div中有空格的話有些瀏覽器會自動撐高,把div的line-height設定為0就行了;

還有的可能是瀏覽器預設的margin,padding不為0導致,設定為0 即可。

4樓:李煥晴

css樣式裡新增

img{

display:block;

更科學的方式

img{

vertical-align: bottom

Unity3D 和 HTML 5 抉擇哪乙個?

jiang jieqim 技術是換湯不換藥的,很多演算法和底層實現其實差不多,比如說你要做個引擎基本都要用到矩陣,三角函式等。我看過一點unity3d,也了解一點h5,這之前我用opengl自己寫過乙個小遊戲引擎。其實我覺得樓主學習東西要專注不變的東西。至少我覺得這樣才能一勞永逸,計算機技術更新了比...

很奇怪的乙個人?

憶子卿 有壞處有好處吧,誰不都不想被別人一眼看透,所以別人會防著他,如果真的能看懂別人,如果心存善意應該不說破,很好的體諒和幫助別人! borisxian 情商高。如果其他變數一樣的話,當然他是優選 如果其他變數不一樣的話,沒有人能給出答案。假設其他變數一樣,那麼問題就成為了 情商高與情商低各有什麼...

有乙個很奇怪的問題,為什麼監控 演練之前要打聲招呼?

芝寶 提醒前方有測速,一般有指示牌,或者導航提醒。指示牌屬於交警部門設定,一般設定在事故多發地,這樣可以讓司機減速,減少事故發生率,目的不是非要罰款,而是讓司機開慢點,開穩點,偷偷的那種測速不在此回答範圍內。導航提醒的就好理解了,為了商業目的嘛,導航連測速點都不知道,我幹嘛用這個品牌的導航?關於演練...