css - 為什么video不能填滿整個(gè)父級div？底部有黑邊？
問題描述
代碼如下：
<!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.aoyou183.cn/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)致底部有黑邊？
問題解答
回答1：補(bǔ)充下，貌似這個(gè)黑邊是因?yàn)楦冈貥邮嚼镉辛薭ackground屬性，具體來說是background-color這個(gè)屬性，至于成因是什么，實(shí)話講我也不知道……
目前猜測原因可能是和video默認(rèn)的display是inline有關(guān)系。
所以解決方案應(yīng)該是：
加上font-size: 0;；
去掉background/background-color屬性；
給<video>加上display: block;樣式。
回答2：因?yàn)槟愕母冈豽ideoContainer沒有高度，當(dāng)<video>使用了contorl屬性的時(shí)候，就會(huì)出現(xiàn)一個(gè)黑邊。**解決方法：1、刪掉contorl屬性 2、給父元素高度，或者用padding撐開等**
回答3：其實(shí)這是一個(gè)html的bug，父級的font size設(shè)為0就正常了。。
相關(guān)文章：
1. apache - 想把之前寫的單機(jī)版 windows 軟件改成網(wǎng)絡(luò)版，讓每個(gè)用戶可以注冊并登錄。類似 qq 的登陸，怎么架設(shè)服務(wù)器呢？2. javascript - 為什么嵌套的Promise不能按預(yù)期捕獲Exception？3. javascript - 編程，算法的問題4. java - HTTPS雙向認(rèn)證基礎(chǔ)上有無必要再進(jìn)行加簽驗(yàn)簽？5. windows - asp.net連接上mysql之后如何調(diào)用？比如下面的登錄驗(yàn)證功能怎么實(shí)現(xiàn)6. mysql - 面試題：如何把login_log表轉(zhuǎn)換成last_login表？7. 剛放到服務(wù)器的項(xiàng)目出現(xiàn)這中錯(cuò)誤，有高手指點(diǎn)嗎8. css - 手機(jī)qq打開網(wǎng)頁無法使用文件上傳功能?9. javascript - nodejs實(shí)現(xiàn)異步時(shí)遇到的一個(gè)問題10. css3 - Typecho 后臺(tái)部分表單按鈕在 Chrome 下出現(xiàn)靈異動(dòng)畫問題，求解決
網(wǎng)公網(wǎng)安備