Heim  >  Artikel  >  Web-Frontend  >  IE7下CSS显示有问题啊。_html/css_WEB-ITnose

IE7下CSS显示有问题啊。_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:39:11848Durchsuche

<!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=utf-8" /><title>test</title><link href="include/overall.css" rel="stylesheet" type="text/css" /></head><body><div id="top">顶部top具体安排</div><div id="nav">	<div id="logo"><img  src="images/logo.png"    style="max-width:90%" / alt="IE7下CSS显示有问题啊。_html/css_WEB-ITnose" ></div>  <div id="dh">	<ul class="menu">        <li class="tuckUp" onmousemove="this.className='pullDown'" onmouseout="this.className='tuckUp'">小天空            <div class="item">        		<a href="index1.html">那些事</a>            	<br />            	<a href="Untitled-1.html">那些人</a>                <br />                <a href="/">藏宝阁</a><br />        		<br />        	</div>        </li>        <li class="tuckUp" onmousemove="this.className='pullDown'" onmouseout="this.className='tuckUp'">关于我            <div class="item">        		<a href="/">ITEM01</a>            	<br />            	<a href="/">ITEM02</a><br />        		<br />        	</div>        </li>         <li class="tuckUp" onmousemove="this.className='pullDown'" onmouseout="this.className='tuckUp'">代码手册            <div class="item">        		<a href="/">ITEM01</a>            	<br />            	<a href="/">ITEM02</a><br />        		<br />        	</div>        </li>    </ul>    </div></div><!-- 这里是banner,分割线下方!  --><div id="banner"></div><div id="index">	<div id="indexnew">    	<div class="indexact">显示正文部分</div>        <hr />        <div class="indexact"></div>    </div>    <div id="indexhr"></div>    <div id="indexplug">显示plug部分</div></div></body></html>


说一下那个banner大小,1000乘以300px的
css如下:
@charset "utf-8";/* CSS Document */body { margin: 0px;}.hr	{height: 1px;border: none;border-top: 1px solid #2673EC;margin-top: 5px;margin-right: 0px;margin-bottom: auto;margin-left: 0px;}/*分割线样式*//*顶部布局开始*/	#top {background-color: #2673EC;height: 50px;width: 100%;}#topbj {margin: auto;height: 70px;width: 1000px;}#logo {height: 55px;width: 250px;float: left;}#banner {	height: 300px;	width: 1000px;	background-image: url(../images/banner.jpg);	margin-right: auto;	margin-bottom: auto;	margin-left: auto;}#nav {height: 110px;width: 1000px;margin: auto;}#dh {	float: right;	margin-top: 64px;	font-family: "微软雅黑";	margin-right: 5px;}ul li {list-style:none;}.menu li {display: inline;float: left;margin: 0 5px;/* [disabled]background: #f2f2f2; *//* [disabled]border: 1px #39c solid; */text-align: center;font-size: 20px;font-weight: 700;line-height: 30px;cursor: hand;}.tuckUp {display: inline;width: 120px;height: 30px;overflow: hidden;margin-bottom: 0px;}.pullDown{display: inline;height: auto;}.item a:link, .item a:visited {display: inline;float: left;width: 120px;background: #ccc;text-align: center;color: #929292;font-size: 20px;font-weight: normal;text-decoration: none;}.item a:hover {float: left;color: #FFF;text-decoration: none;text-align: center;font-size: 20px;font-weight: 700;font-weight: normal;}/*导航部分结束*/#index {margin: auto;width: 1000px;height: 900px;}#indexnew {	float: left;	width: 760px;	margin-top: 10px;}.indexact {height: 300px;width: 700px;}#indexplug {	float: left;	width: 225px;	margin-top: 10px;}#indexhr {	width: 5px;	float: left;	border-left-width: 1px;	border-left-style: solid;	border-left-color: #93C;	margin-top: 20px;	height: 700px;	margin-left: 5px;}

在IE7下显示有问题啊。。。。
成这个样子,求大牛指点!!!!!


回复讨论(解决方案)

没人吗!!!!!!!!!!!!!!!!!!!!



没人吗!!!!!!!!!!!!!!!!!!!!

bannner把下菜单项覆盖了的问题吗?如果是的话,给菜单选项块设置z-index优先显示。

引用 1 楼 shenxinqibei 的回复:没人吗!!!!!!!!!!!!!!!!!!!!bannner把下菜单项覆盖了的问题吗?如果是的话,给菜单选项块设置z-index优先显示。

items要设置浮动但其父元素不要设置浮动。或者直接把item的position:absolute;然后用margin-top/margin-left定位;

菜单

  • option1


引用 2 楼 jwf007 的回复:引用 1 楼 shenxinqibei 的回复:没人吗!!!!!!!!!!!!!!!!!!!!bannner把下菜单项覆盖了的问题吗?如果是的话,给菜单选项块设置z-index优先显示。items要设置浮动但其父元素不要设置浮动。或者直接把item的position:absolute;然后用margin-top/margin-left定……


还是导航和banner应该是无缝的~~~
IE8、9正常
IE7却上移了一些。。。怎么解决?

引用 3 楼 jwf007 的回复:引用 2 楼 jwf007 的回复:引用 1 楼 shenxinqibei 的回复:没人吗!!!!!!!!!!!!!!!!!!!!bannner把下菜单项覆盖了的问题吗?如果是的话,给菜单选项块设置z-index优先显示。items要设置浮动但其父元素不要设置浮动。或者直接把item的position:absolute;然后用margi……

哦,你试试在样式里加一个img{margin:0}看看。猜是图片的BUG问题

引用 4 楼 shenxinqibei 的回复:引用 3 楼 jwf007 的回复:引用 2 楼 jwf007 的回复:引用 1 楼 shenxinqibei 的回复:没人吗!!!!!!!!!!!!!!!!!!!!bannner把下菜单项覆盖了的问题吗?如果是的话,给菜单选项块设置z-index优先显示。items要设置浮动但其父元素不要设置浮动。或者直接把item的po……

img{margin-bottom:-3px;}a img{border:none}试试

引用 5 楼 jwf007 的回复:引用 4 楼 shenxinqibei 的回复:引用 3 楼 jwf007 的回复:引用 2 楼 jwf007 的回复:引用 1 楼 shenxinqibei 的回复:没人吗!!!!!!!!!!!!!!!!!!!!bannner把下菜单项覆盖了的问题吗?如果是的话,给菜单选项块设置z-index优先显示。items要设置浮动但其父元素不……


我是以css背景的方式加载图片的,如果以图片写在html,导航会把banner往下拉......
问题这BUG,IE7和IE6都出现。。。。。不是应该IE6才出现吗?

好吧。。。。都没效。。。
亲,你在DW做,然后用IE F12调试下吧。。。
我已经被这个折磨疯了。。。。。
求修改代码啊!!!!

真心想做  ,你 把ie8,ie7的 页面都贴出来 ,方便大家看啊  ,这样只能乱猜 

#nav {height: 110px;width: 1000px;margin: auto; z-index:1; position: relative;}

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn