div的高度問題

根據div css網頁佈局的需要，我們有時候需要設置容器的高度爲1px。而設置後在IE中預覽，並不是所設置的樣子，好象容器被撐開了，達不到想要的最小高度。

其實這是IE的默認行高所引起的，解決的方法也有很多，下面例舉overflow:hidden、line-heigh兩種方法：

overflow:hidden實現最小高度

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 02.<html xmlns="http://www.w3.org/1999/xhtml"> 03.<head> 04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05.<title>mb5u.com</title> 06.<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> 07. 08.#YourHomePage_com_cn { 09. width:100%; 10. height:1px; 11. background:#c00; 12. overflow:hidden; 13. } 14. 15.</style> 16.</head> 17.<body> 18.<div id="YourHomePage_com_cn">?</div> 19.</body> 20.</html>

line-height實現最小高度

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 02.<html xmlns="http://www.w3.org/1999/xhtml"> 03.<head> 04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05.<title>mb5u.com</title> 06.<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> 07. 08.#YourHomePage_com_cn { 09. width:100%; 10. height:1px; 11. background:#c00; 12. line-height:1px; 13. } 14. 15.</style> 16.</head> 17.<body> 18.<div id="YourHomePage_com_cn">?</div> 19.</body> 20.</html>

將字體大小設爲高度大小

毛毛的IT生涯

發佈了28 篇原創文章 · 獲贊 48 · 訪問量 4萬+

私信關注

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

div的高度問題

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

web.xml中的3中配置

EasyUI視頻教程----權限系統開發

常用的正則表達式

字符串編碼問題的原理

div的高度問題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結