Home >Web Front-end >HTML Tutorial >There is a problem with CSS display under IE7. _html/css_WEB-ITnose

There is a problem with CSS display under IE7. _html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:39:11866browse

<!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" height="110" /></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>


Let’s talk about the banner size, 1000 times 300px.
The css is as follows:
@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;}

There is a problem with the display under IE7. . . .
If it looks like this, please give me some advice! ! ! ! !


Reply to discussion (solution)

No one! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !



No one! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

Is there a problem with bannner covering the lower menu items? If so, set the z-index priority for the menu option block.

Quoting the reply from shenxinqibei on the 1st floor: No one is there! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Is there a problem with the banner covering the lower menu items? If so, set the z-index priority for the menu option block.

Items should be floated but their parent elements should not be floated. Or directly position the item: absolute; and then use margin-top/margin-left to position;
7871da6602c6212ebd936b1d985f09fd
Menu
7dde48fa1659800dd3f22eaa1d03fbb0
25edfb22a4f469ecb59f1190150159c6option1bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68

Quote 2nd floor jwf007's reply: Quote 1 Lou shenxinqibei's reply: No one is there! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Is there a problem with the banner covering the lower menu items? If so, set the z-index priority for the menu option block. Items should be floated but their parent elements should not be floated. Or directly set the item's position: absolute; and then use margin-top/margin-left to set it...


Or the navigation and banner should be seamless~~~
IE8 and 9 are normal
IE7 But it moved up a bit. . . How to solve it?

Quote from jwf007 on the 3rd floor: Reply from jwf007 on the 2nd floor: Reply from shenxinqibei on the 1st floor: No one! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Is there a problem with the banner covering the lower menu items? If so, set the z-index priority for the menu option block. Items should be floated but their parent elements should not be floated. Or directly set the item's position: absolute; and then use margin...

Oh, try adding an img{margin: 0} to the style and see. Guess it's a BUG problem with the picture

Quote from 4th floor shenxinqibei's reply: Quote from 3rd floor jwf007's reply: Quote from 2nd floor jwf007's reply: Quote from 1st floor shenxinqibei's reply: No one is there! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Is there a problem with the banner covering the lower menu items? If so, set the z-index priority for the menu option block. Items should be floated but their parent elements should not be floated. Or directly put the po of the item...

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

Quote from 5th Floor jwf007’s reply: Quote from 4th Floor shenxinqibei Reply: Quote from jwf007 on the 3rd floor: Reply from jwf007 on the 2nd floor: Quote from shenxinqibei on the 1st floor: No one is there! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Is there a problem with the banner covering the lower menu items? If so, set the z-index priority for the menu option block. items need to be set to float but their parent elements are not...


I load the image as a css background. If the image is written in html, the navigation will pull the banner down...
This bug occurs in both IE7 and IE6. . . . . Shouldn't it only appear in IE6?

Okay. . . . None worked. . .
Dear, you can do it in DW, and then use IE F12 to debug it. . .
I have been tortured crazy by this. . . . .
Please modify the code! ! ! !

I really want to do it, you can post the pages of ie8 and ie7 so that everyone can see them, but you can only guess randomly

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn