css - 為什么video不能填滿整個(gè)父級(jí)div？底部有黑邊？
問(wèn)題描述
代碼如下：
<!DOCTYPE html> <html> <head> <title>Demo</title> <style>.videoContainer { width: 70%; height: auto; background: #000;}</style></head> <body> <p > <video controls preload='auto' > <source src='http://www.piao2010.com/wenda/test.mp4' type='video/mp4' /> <p>Your browser does not support the video tag.</p> </video></p></body> </html>
最終的顯示效果：
我的疑惑是：為什么父元素p會(huì)比video高出幾個(gè)像素，從而導(dǎo)致底部有黑邊？
問(wèn)題解答
回答1：補(bǔ)充下，貌似這個(gè)黑邊是因?yàn)楦冈貥邮嚼镉辛薭ackground屬性，具體來(lái)說(shuō)是background-color這個(gè)屬性，至于成因是什么，實(shí)話講我也不知道……
目前猜測(cè)原因可能是和video默認(rèn)的display是inline有關(guān)系。
所以解決方案應(yīng)該是：
加上font-size: 0;；
去掉background/background-color屬性；
給<video>加上display: block;樣式。
回答2：因?yàn)槟愕母冈豽ideoContainer沒(méi)有高度，當(dāng)<video>使用了contorl屬性的時(shí)候，就會(huì)出現(xiàn)一個(gè)黑邊。**解決方法：1、刪掉contorl屬性 2、給父元素高度，或者用padding撐開(kāi)等**
回答3：其實(shí)這是一個(gè)html的bug，父級(jí)的font size設(shè)為0就正常了。。
相關(guān)文章：
1. javascript - 關(guān)于apply（）與call（）的問(wèn)題2. javascript - axios請(qǐng)求回來(lái)的數(shù)據(jù)組件無(wú)法進(jìn)行綁定渲染3. java - 在用戶不登錄的情況下，用戶如何添加保存到購(gòu)物車？4. javascript - JS變量被清空5. javascript - 有適合開(kāi)發(fā)手機(jī)端Html5網(wǎng)頁(yè)小游戲的前端框架嗎？6. Python中使用超長(zhǎng)的List導(dǎo)致內(nèi)存占用過(guò)大7. css3 - 純css實(shí)現(xiàn)點(diǎn)擊特效8. 安全性測(cè)試 - nodejs中如何防m(xù)ySQL注入9. javascript - jQuery post()方法，里面的請(qǐng)求串可以轉(zhuǎn)換為GBK編碼么？可以的話怎樣轉(zhuǎn)換？10. html5 - 請(qǐng)問(wèn)現(xiàn)在主流的前端自動(dòng)化構(gòu)建工具是哪個(gè)？
網(wǎng)公網(wǎng)安備