為企業提供網站平臺解決方案

178 7892 1916

QQ客服:點擊這里給我發消息 點擊這里給我發消息

最新動態:

常見問題

你的位置:e球彩ef进球数 > 建站知識 > 常見問題 > html5圖片img間隙解決方法

虚拟足球e球彩体彩:html5圖片img間隙解決方法

發布時間:2014-01-20 17:31作者:e球彩ef进球数網址:e球彩ef进球数瀏覽:次
同學都知道其中有個觀點,那就是html5的頭部doctype僅僅是針對驗證器的,而對于IE則是讓其按照標準模式表現的標記。 事實上標準瀏覽器在是否加doctype是一樣的。 但其實這其中還是有所差異,不知道是否是瀏覽器刻意而為還是什么原因,但它就是存在。 使用老式html/xhtml的
同學都知道其中有個觀點,那就是html5的頭部doctype僅僅是針對驗證器的,而對于IE則是讓其按照標準模式表現的標記。
事實上標準瀏覽器在是否加doctype是一樣的。
但其實這其中還是有所差異,不知道是否是瀏覽器刻意而為還是什么原因,但它就是存在。
使用老式html/xhtml的docytpe和html5的doctype的確存在細微差異
大家還記得圖片底部那3px的空隙么,可能有些同學納悶,那個空隙好像有些時候有有些時候沒有,沒錯,這個區別就在于doctype。
我們來看兩個例子:
xhtml://blog.dmtuan.com/demo/xhtml-html5/xhtml.html
html5://blog.dmtuan.com/demo/xhtml-html5/html5.html

 
請用火狐/chrome/ie8以上觀看,我發現在使用xhtml形式的doctype或者更老的html甚至不加doctype,在這些瀏覽器里圖片下面的3px間隙消失了。而在html5下卻又出現了
原來 html5 doctype激活 standard mode,xhtml1.0激活almost standard mode(限制性quick mode)
這里有一個詳細的列表來闡述兩者的區別。
其中提到了在quirks mode下img默認是block(去掉img下3px間隙的解決辦法之一)的,所以導致上面大家所見的。

解決方案:給圖片加上style="display:block;"
img src="images/opp7.png" style="display:block;"/>
<img src="images/opp8.png" style="display:block;"/>
<img src="images/opp9.png" style="display:block;"/>
<img src="images/opp10.png" style="display:block;"/>