请教设置<ul>的background时，在ie下正常，在360急速浏览器中总是偏在文字上方，望高手支招_html/css

首頁

web前端

html教學

请教设置<ul>的background时，在ie下正常，在360急速浏览器中总是偏在文字上方，望高手支招_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:18 PM

设置

<div id="nav"><ul><li>a</li><li>a</li><li>a</li><li>a</li><ul></div>

#nav{float:left;width:990px;background:#319CE2;list-style-type:none;font-size:14px;font-weight:bold;}

回复讨论(解决方案)

ul｛margin:0;padding:0;list-style-type:none;｝

同时建议你注意下你的 ul 闭合标签。

引用 3 楼 flyzq0525 的回复:

nav float了，要加clear，要不然就漂出去了。
在nav后添加：
一般浏览器:

<div style="clear:both;"></div>

#navParent{oveflow:hidden;zoom:1;/* ie7 */}

nav float了，要加clear，要不然就漂出去了。
在nav后添加：
一般浏览器:

XML/HTML code
?

1

引用 4 楼 emituofo 的回复:
引用 3 楼 flyzq0525 的回复:

引用 5 楼 flyzq0525 的回复:引用 4 楼 emituofo 的回复:
引用 3 楼 flyzq0525 的回复:

#nav ul li{list-style-type:none; float:left;}
你写的样式！⊙?⊙b汗

这个

把ul和li的样式贴出来

会不会是IE8和火狐对margin、padding的兼容性解析的差异造成的，
正在查资料求证中……

<style type="text/css">.nav{float:left;width:990px;background:#319CE2;list-style-type:none;font-size:14px;font-weight:bold;}.nav ul{list-style:none;margin:0;padding:0;}.nav ul li{float:left;width:120px;height:30px;line-height:30px;margin:0;padding:0;border-right:2px solid #fff}</style><div id="nav" class="nav"><ul><li>a</li><li>a</li><li>a</li><li>a</li></ul></div>

把ul和li的样式贴出来

#nav{float:left;width:990px;background:#319CE2;list-style-type:none;font-size:14px;font-weight:bold;}/* 此处width设置菜单条宽度 */#nav a{display:block;text-align:center;}#nav a:link{color:#fff;text-decoration:none;}#nav a:visited{color:#fff;text-decoration:none;}#nav a:hover{color:#fff;text-decoration:none;}#nav li{float:left;display:inline-block;padding-top:10px;height:18px; *height:22px;padding-bottom:5px;padding-left:10px;padding-right:10px;border-right:2px solid #fff;list-style-type:none;}/* 此处width设置一级菜单宽度 */#nav li a:hover{background:#b3ab79;}#nav li ul{margin:0px;list-style-type:none;text-align:left;left:-960em;width:220px;border:1px;position:absolute;}/* 此处设置子菜单的宽度后，子菜单换行 */#nav li ul li{font-size:12px;width:220px;background:#9FB079;height:10px;line-height:10px;border:0px}/* 此处改子菜单的背景色、宽度、字体大小等 */#nav li ul a{display:block;width:220px;text-align:left;padding-left:6px;}#nav li ul a:link{color:#fff;text-decoration:none;}#nav li ul a:visited{color:#fff;text-decoration:none;}#nav li ul a:hover{color:#F3F3F3;text-decoration:none;font-weight:normal;height:20px;background:#C00;}#nav li:hover ul{left:auto;}#nav li.sfhover ul{left:auto;}#content{clear:left;}

是为了清除浮动，只是写这么多是为了浏览器的兼容性，

.class{overflow:hidden;}

引用 12 楼 zhang_7150 的回复:把ul和li的样式贴出来

CSS code?12345678910111213141516#nav{float:left;width:990px;background:#319CE2;list-style-type:none;font-size:14px;font-weight:bold;}/* 此处width设置菜单条……

li是ul的子元素，你的写法有问题，而且重复定义太多，不推荐使用id选择器，id一般用来唯一标志一个元素用的。
你可以试下我14楼的回复，我测试没问题。

感谢楼上的几位热心朋友鼎力相助，问题基本解决，我现在小结如下，也许对和我一样的初学者有帮助：

1、 id="nav"不应该加在div上，而是直接加在外层ul上，同时，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>Like</title><meta name="keywords" content="LikeCell,"/><meta name="description" content=""/><script type="text/javascript">function menuFix(){  var sfEls = document.getElementById("nav").getElementsByTagName("li");     for(var i=0;i<sfEls.length;i++){    sfEls[i].onmouseover=function(){      this.className+=(this.className.length>0 ? " ":"") + "sfhover";      if(window.event){         var ul = this.getElementsByTagName("ul")[0];         if(ul) ul.style.left = "auto";      }    }     sfEls[i].onMouseDown=function(){         this.className+=(this.className.length>0 ? " ":"") + "sfhover";       }    sfEls[i].onMouseUp=function(){         this.className+=(this.className.length>0 ? " ":"") + "sfhover";       }    sfEls[i].onmouseout=function(){      this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");      if(window.event){         var to = event.toElement;         var ul = this.getElementsByTagName("ul")[0];         if(ul) if(!ul.contains(to)) ul.style.left = "-999em";      }    }  }  }window.onload = menuFix;</script><style type="text/css"> @charset "utf-8";body{text-align:justify;text-justify:newspaper;font-size:12px;color:#000;font-family:"Arial",Times New Roman,Georgia,Serif,Courier New,Courier,monospace;padding:0px;margin:0px auto 0px auto;}/* 主区域 */.wrap{padding:0px 5px;width:990px;margin:0px auto;background:#B9EEFF;}/* 菜单 */#navParent{overflow:hidden;zoom:1;background:#319CE2;}/* ie */#nav{float:left;font-size:14px;font-weight:bold;}/* 此处width设置菜单条宽度*width:980px;width:950px; */#nav a{display:block;text-align:center;}#nav a:link{color:#fff;text-decoration:none;}#nav a:visited{color:#fff;text-decoration:none;}#nav a:hover{color:#fff;text-decoration:none;}#nav li{float:left;padding:5px 15px;border-right:2px solid #fff;list-style-type:none;}/* 此处width设置一级菜单宽度 */#nav li a:hover{background:#b3ab79;}#nav li ul{margin:0px;list-style-type:none;text-align:left;left:-900em;width:220px;border:1px;position:absolute;}/* 此处设置子菜单的宽度后，子菜单换行 */#nav li ul li{font-size:12px;padding:5px;background:#9FB079;height:10px;border-bottom:1px white solid;}/* 此处改子菜单的背景色、宽度、字体大小等 */#nav li ul a{display:block;width:220px;text-align:left;padding-left:6px;}#nav li ul a:link{color:#fff;text-decoration:none;}#nav li ul a:visited{color:#fff;text-decoration:none;}#nav li ul a:hover{color:#F3F3F3;text-decoration:none;font-weight:normal;height:20px;background:#C00;}#nav li:hover ul{left:auto;}#nav li.sfhover ul{left:auto;}</style> </head><body><div class="wrap">	<!--菜单-->	<div id="navParent">		<ul id="nav">			<li><a href="/" title="">首页</a></li>			<li><a href="#" title="">菜单二</a>				<ul>					<li><a href='#' title=''>子菜单1</a></li>					<li><a href='#' title=''>子菜单2</a></li>					<li><a href='#' title=''>子菜单3</a></li>				</ul>			</li>			<li><a href="#" title="">菜单三</a></li>			<li><a href="#" title="">菜单四</a></li>			<li><a href="#" title="">菜单五</a></li>			<li><a href="#" title="">菜单六</a></li>			<li><a href="#" title="">菜单七</a></li>			<li><a href="#" title="">菜单八</a></li>		</ul>	</div>	<div style="clear:both;"> </div></div></body></html>

今天正好在网上找到一个很不错的下拉菜单，完全是用css实现的，不用js，很不错，我稍微加以修改，在IE8、FF、谷歌、360等浏览器下都没问题，但是不知道是哪里的问题，在IE6下，没有下拉菜单效果，望高手加以改进：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>一个很不错的下拉导航菜单</title><style type="text/css"><!--#navParent {position:absolute;margin:0 auto 0 auto !important;background-color:#3591da;height: 29px;width: auto;font-size:12px;}#navParent ul {text-align:center;padding: 0;margin: 0;list-style: none;}#navParent ul a{color:#ffffff;font-size:12px;}        #navParent li {float: left;width: 120px;border-right:2px solid #fff;}#navParent li ul {display: none;}#navParent li ul li{width:230px;text-align:left;}#navParent li:hover ul, li.over ul {display: block;}#navParent ul li a {background-color:#3591da;padding:7px;border-bottom:1px white solid;text-decoration: none;display:block;font-weight: bolder;}#navParent ul li a:hover{background-color:#076bb9;}--></style></head><body><div id="navParent"><ul>  <li><a href="">Computers</a>    <ul>      <li><a href="">Computer Parts</a></li>      <li><a href="">USB Flash Memory</a></li>      <li><a href="">Batteries</a></li>      <li><a href="">USB data cable</a></li>	  <li><a href="">Computer Hardware</a></li>	  <li><a href="">Earphone</a></li>	  <li><a href="">Remote Storage</a></li>	</ul>	</li>  <li><a href="">Electronics </a>    <ul>      <li><a href="">GPS</a></li>	        <li><a href="">Bluetooth Carkits</a></li>      <li><a href="">Cell phones</a></li>      <li><a href="">MP3/MP4</a></li>	  <li><a href="">Digital Cameras</a></li>  	</ul>	</li>		<li><a href="">Toys</a>    <ul>      <li><a href="">Games</a></li>      <li><a href="">Remote Control Toys</a></li>      <li><a href="">Toys by Ages</a></li>     </ul>	</li>			<li><a href="">Cameras</a>    <ul>      <li><a href="">Digital Cameras</a></li>      <li><a href="">Camcorders</a></li>      <li><a href="">Batteries</a></li>      <li><a href="">Memory Cards</a></li>  	</ul>	</li>			<li><a href="">CellPhones </a>    <ul>      <li><a href="">Free Cellphones with Plans</a></li>      <li><a href="">Refurbished cellphones</a></li>      <li><a href="">Prepaid Refills</a></li>      <li><a href="">Free Ringtones</a></li>	  <li><a href="">Cellphone Accessories</a></li>  	</ul>	</li>		<li><a href="">Batteries </a>    <ul>      <li><a href="">Cellphone Batteries</a></li>	  <li><a href="">Laptop Batteries</a></li>      <li><a href="">Digital Camera Batteries</a></li>      <li><a href="">Camcorder Batteries</a></li>	  <li><a href="">PDA Batteries</a></li>	  <li><a href="">Ipod/MP3 Batteries</a></li>	  <li><a href="">Others</a></li>	</ul>	</li>		<li><a href="">Video Games</a>    <ul>      <li><a href="">Wii</a></li>	  <li><a href="">Xbox 360</a></li>      <li><a href="">PlayStation 2/PS 2</a></li>      <li><a href="">Nintendo DS</a></li>	  <li><a href="">PlayStation 3/PS 3</a></li>	  <li><a href="">PSP</a></li>	  <li><a href="">PC games</a></li>	   	  <li><a href="">Game Console</a></li>	  	  <li><a href="">Accessories</a></li>		</ul>	</li></ul></div></body></html>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML中的布爾屬性是什麼？舉一些例子。Apr 25, 2025 am 12:01 AM

布爾屬性是HTML中的特殊屬性，不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為，如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性，高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值，正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔，合理使用布爾屬性以優化網頁性能和用戶體驗。

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

See all articles