我最近在我的网站上添加了一些 css,它在除 IE 7 及更低版本之外的所有浏览器中都能正常工作,我不太确定为什么而且我不是 css 大师(还;))而且我的 css 可能是错误的,但你能请解释是什么让 IE7 和更低版本的网站外观混乱?如果你在 IE8 或任何其他浏览器和 IE7 中比较它,你就会明白我在说什么。你能指出问题出在哪里吗?
网页:http: //inelmo.com/inelmo
侧边栏的CSS:(我只包括了这个,因为一旦我添加了这部分代码就会出现问题)
#sidebar {
width: 440px;
float: right;
}
/* Navigation Menu */
#navigationMenu {
width: 50px;
position: absolute;
z-index: 99;
}
#navigationMenu li {
list-style: none;
height: 39px;
padding: 2px;
width: 40px;
}
#navigationMenu span {
width: 0;
left: 38px;
padding: 0;
position: absolute;
overflow: hidden;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.6px;
white-space: nowrap;
line-height: 39px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-o-transition: 0.25s;
-ms-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a {
background: url("../images/nav_bg.png") no-repeat;
height: 39px;
width: 38px;
display: block;
position: relative;
text-decoration: none;
}
#navigationMenu a:hover span {
width: auto;
padding: 0 20px;
overflow: visible;
}
#navigationMenu a:hover {
text-decoration: none;
}
/* Home Button */
#navigationMenu .home {
background-position: 0 0;
}
#navigationMenu .home:hover {
background-position: 0 -39px;
}
#navigationMenu .home span {
background-color: #7da315;
color: #3d4f0c;
text-shadow: 1px 1px 0 #99bf31;
}
/* Categories Button */
#navigationMenu .categories {
background-position: -38px 0;
}
#navigationMenu .categories:hover {
background-position: -38px -39px;
}
#navigationMenu .categories span {
background-color: #1e8bb4;
color: #223a44;
text-shadow: 1px 1px 0 #44a8d0;
}
/* Top Button */
#navigationMenu .top {
background-position: -76px 0;
}
#navigationMenu .top:hover {
background-position: -76px -39px;
}
#navigationMenu .top span {
background-color: #c86c1f;
color: #5a3517;
text-shadow: 1px 1px 0 #d28344;
}
/* AntiTop Button */
#navigationMenu .antiTop {
background-position: -114px 0;
}
#navigationMenu .antiTop:hover {
background-position: -114px -39px;
}
#navigationMenu .antiTop span {
background-color: #af1e83;
color: #460f35;
text-shadow: 1px 1px 0 #d244a6;
}
/* Logo styling */
#logo {
width: 390px;
margin: 0 0 0 50px;
position: absolute;
z-index: -1;
}
/******/
#sideWrapper {
width: 437px;
background: url("../images/sidebar_strip.png") repeat-x;
padding: 15px 0 0 3px;
margin: 190px 0 0 0;
}