【HTML】ie6包含img 的div多2px的bottom值[div高度自适应]_html/css_WEB-ITnose
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>new_file</title> <meta name="author" content="Administrator" /> <!-- Date: 2012-12-26 --> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/960.css" /> </head> <body> <style> /* * COMMon * ********** */ a{text-decoration: none;} a:hover{color: gold;} /* * COLOR * ******* */ div{text-align: center} .red{background-color:red} .green{background-color:green} .yellow{background-color:yellow} .silver{background-color:silver} .gray{background-color:gray} .pink{background-color:pink} .orange{background-color: orange} .blue{background-color:blue} /* * 元素 * ***** */ /* * header * ********** */ #logo{height: 100px;} #contactway{height:67px;float: right } #nave{height:33px;width:700px; float: left;background-image: url(src/nv.png);background-repeat: no-repeat;overflow: hidden;} #nave ul{list-style: none;float: left;height: 32px;} #nave ul li{float: left;width: 100px;text-align: center;margin-left: 0px;height: 32px;} #nave ul li a{line-height: 32px;font-weight:bold;display:inline-block; color: white;width: 100%;height: 100%;} #nave ul li a:hover{background-image: url(src/nvbk.png);background-repeat: no-repeat;} /* * center * ********** */ #cases{width: 100%;float: left;} </style> <!--Containner16--> <div class="container_16"> <!--header--> <div class="grid_4" style="margin-bottom: -3px;"> <div id="logo" class="yellow"> <img src="/static/imghw/default1.png" data-src="src/logo.png" class="lazy" / alt="【HTML】ie6包含img 的div多2px的bottom值[div高度自适应]_html/css_WEB-ITnose" > </div> </div> <div class="grid_12 orange"> <!--联系方式--> <div id="contactway"> <img src="/static/imghw/default1.png" data-src="src/serverph.png" class="lazy" / alt="【HTML】ie6包含img 的div多2px的bottom值[div高度自适应]_html/css_WEB-ITnose" > </div> <div class="clear"> </div> <!--nave--> <div id="nave"> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于火狼</a></li> <li><a href="#">服务项目</a></li> <li><a href="#">案例展示</a></li> <li><a href="#">客户服务</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">VIP服务</a></li> </ul> </div> <div class="clear"> </div> </div> <!--光晕--> <div class="clear"> </div> <div class="grid_16 blue"> 光晕 </div> <!--Banner--> <div class="clear"> </div> <div class="grid_16 pink"> Banner </div> <!--简介--> <div class="clear"> </div> <div class="grid_16 blue"> 关于+简介 </div> <!--展示--> <div class="clear"> </div> <div class="grid_16 yellow"> <dl> <dt><a href="#">案例展示</a></dt> <dd> </dd> </dl> </div> <!--friends--> <div class="clear"> </div> <!--title--> <div class="grid_4 gray"> friends </div> <!--name of friends--> <div class="grid_12 pink"> names of friends </div> <!--about--> <div class="clear"> </div> <div class="grid_8 red"> 页底导航+版权 </div> <!--contact--> <div class="grid_8 green"> 联系电话 </div> <div class="clear"> </div> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.960grid-1.0.min.js"></script> <script type="text/javascript"> /*<![CDATA[*/ // onload $(function() { $("body").addGrid(16, {img_path: 'images/'}); }); /*]]>*/ </script> </body></html>
图示:
导航下面有一细白线,求指点。虽然通过margin_bottom=-3px;可以纠正。但我的问题出在哪里呢?
回复讨论(解决方案)
设置:#nave li{display:inline;} #nave li a{display:block;}试试看
设置:#nave li{display:inline;} #nave li a{display:block;}试试看 搞定了,问题不是 a标签,我调试了很久发现只要设置一个img{margin-bttom:-3px}就正常了
ie6版本 的 ul列表框 有个bug,会在 li上下添加额外的空间,所以一般的修正办法都是 设置 li{第四play:inline},而其中的锚元素 ,一半设置成 block即可了

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

熱門話題

本文討論了HTML&lt; Progress&gt;元素,其目的,樣式和與&lt; meter&gt;元素。主要重點是使用&lt; progress&gt;為了完成任務和LT;儀表&gt;對於stati

本文討論了html&lt; datalist&gt;元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

本文討論了HTML&lt; meter&gt;元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了&lt; meter&gt;從&lt; progress&gt;和前

本文討論了使用HTML5表單驗證屬性,例如必需的,圖案,最小,最大和長度限制,以直接在瀏覽器中驗證用戶輸入。

本文討論了視口元標籤,這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互,而濫用可能會導致設計和可訪問性問題。

本文討論了&lt; iframe&gt;將外部內容嵌入網頁,其常見用途,安全風險以及諸如對象標籤和API等替代方案的目的。

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...
