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

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

WBOY原创: 2016-06-24 12:18:481210浏览

设置

<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/css_WEB-ITnose下一篇：导航栏显示不正常_html/css_WEB-ITnose

查看更多

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

回复讨论(解决方案)

相关文章