css菜单在IE8中出错什么问题

html-css017

css菜单在IE8中出错什么问题,第1张

给你一个用css写的。具体的样式你自己改一下css。

<html>

<head>

<style type="text/css">

body{

background-color:white

font-size:12px

font-family:Arial, Helvetica, sans-serif

margin:0px

padding:0px

color:white

}

ul,li{

margin:0px

padding:0px

}

li{

display:inline

list-style:none

list-style-position:outside

text-align:center

font-weight:bold

float:left

}

a:link{

color:#336601

text-decoration:none

float:left

width:100px

padding:3px 5px 0px 5px

}

a:visited{

color:#336601

text-decoration:none

float:left

padding:3px 5px 0px 5px

width:100px

}

a:hover{

color:white

float:left

padding:3px 3px 0px 20px

width:88px

text-decoration:none

background-color:#539D26

}

a:active{

color:white

float:left

padding:3px 3px 0px 20px

width:88px

text-decoration:none

background-color:#BD06B4

}

#nav{

width:600px

height:30px

border-bottom:0px

padding:0px 5px

position:absolute

z-index:1

left: 198px

top: 25px

}

.list{

line-height:20px

text-align:left

padding:4px

font-weight:normal

}

.menu1{

width:120px

height:auto

margin:6px 4px 0px 0px

border:1px solid #9CDD75

background-color:#F1FBEC

color:#336601

padding:6px 0px 0px 0px

cursor:hand

overflow-y:hidden

filter:Alpha(opacity=70)

-moz-opacity:0.7

}

.menu2{

width:120px

height:20px

line-height:20px

margin:6px 4px 0px 0px

background-color:#F5F5F5

color:#999999

border:1px solid #EEE8DD

overflow-y:hidden

cursor:hand

}

</style>

</head>

<body>

<div id="nav">

<ul>

<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">首页

<div class="list">

<a href="#">首页</a><br />

<a href="#">社区</a><br />

<a href="#">日志</a><br />

<a href="#">生活</a><br />

<a href="#">论坛</a><br />

</div>

</li>

<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区

<div class="list">

<a href="#">首页</a><br />

<a href="#">社区</a><br />

<a href="#">日志</a><br />

<a href="#">生活</a><br />

<a href="#">论坛</a><br />

</div>

</li>

<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">生活

<div class="list">

<a href="#">首页</a><br />

<a href="#">社区</a><br />

<a href="#">日志</a><br />

<a href="#">生活</a><br />

<a href="#">论坛</a><br />

</div>

</li>

<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">论坛

<div class="list">

<a href="#">首页</a><br />

<a href="#">社区</a><br />

<a href="#">日志</a><br />

<a href="#">生活</a><br />

<a href="#">论坛</a><br />

</div>

</li>

</ul>

</div>

</body>

</html>

这是因为IE很多方面并没有按html和css的标准来做,它是想搞一套自己的标准,结果证明是失败的,因此IE(主要是指IE8-)不是标准浏览器,很多html5和css3的效果无法在IE中呈现出来。

从IE9开始,微软也慢慢回到标准的轨道上来了,到了IE11就是完全的标准浏览器了。

IE8现在还没有很好的解决兼容性的办法,但是IE8有一个方式是可以降低到IE7版本浏览。就是在每个以完成的页面源码中添加这句话:<meta http-equiv="X-UA-Compatible" content="IE=7" />这样,我们做好的成品页面即使在IE8中测试不兼容,加上上面那段代码,就可以把IE8的兼容性视图降低至IE7,一切就正常啦!以下是css兼容IE6、IE7和FF的方法:区分IE6,IE7,firefox

区别不同浏览器,CSS hack写法:

区别IE6与FF:

background:orange*background:blue

区别IE6与IE7:

background:green !importantbackground:blue

区别IE7与FF:

background:orange*background:green

区别FF,IE7,IE6:

background:orange*background:green_background:blue

background:orange*background:green !important*background:blue

注:IE都能识别*标准浏览器(如FF)不能识别*;

IE6能识别*,但不能识别 !important,

IE7能识别*,也能识别!important

FF不能识别*,但能识别!important