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

WBOY
Release: 2016-06-24 11:39:11
Original
853 people have browsed it

<!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>
Copy after login


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;}
Copy after login

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;

Menu

  • option1


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;}

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template