1

当我position: absolute在选项卡式菜单中设置时，我遇到了溢出问题。

这是查看问题的链接（单击选项卡#one）

CSS

我尝试过各种 jQuery 和 JavaScript 选项卡式菜单，但它们与控制背景图像大小调整器的 java 冲突（我继承了试图修复其他人工作的站点）

这是CSS：

#tabs {margin: 10px auto;min-height: 250px; width: 560px;position: relative}
#tabs li div p {text-align: left}
#tabs a {color: #000;text-decoration: none;outline: none;}
#tabs ul {float: left;margin: 0;padding: 0; position: relative}
#tabs li {float: left;list-style-type: none;}
#tabs li a {
background: -webkit-gradient(linear, left top, left bottom, from(#bdccaa), to(#869968));
background: -moz-linear-gradient(center top , #bdccaa, #869968 18px) repeat scroll 0 0 transparent;
background: -o-linear-gradient(center top , #bdccaa, #869968 18px) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(center top , #bdccaa, #869968 18px) repeat scroll 0 0 transparent;
background: linear-gradient(center top , #bdccaa, #869968 18px) repeat scroll 0 0 transparent;
border: 1px solid #d8e0cf;
border-bottom: 0px;
margin: 0;
padding: 4px 12px;
position: relative;
z-index: 1;
font-size: 90%;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
display: block;
top: 1px;
box-shadow: 0px -1px 5px #aaa
}

#tabs li a:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#e1efcf), to(#9cb178));
background: -moz-linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
background: -o-linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
background: linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
}
#tabs #One:target a,#tabs #Two:target a,#tabs #Three:target a {
color: #000000;
border-bottom: none;
top: 1px;
background: -webkit-gradient(linear, left top, left bottom, from(#e1efcf), to(#9cb178));
background: -moz-linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
background: -o-linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
background: linear-gradient(center top , #e1efcf 12px, #9cb178 25px) repeat scroll 0 0 transparent;
padding-top: 6px;
}
#tabs li div {
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
border: 0px solid #fff;
float: left;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 15px;
position: absolute;
visibility: hidden;
height: auto;
width: 530px;
left: 0;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#FFFFFF));
background: -moz-linear-gradient(center top , #eee, #FFFFFF 85px) repeat scroll 0 0 transparent;
background: -o-linear-gradient(center top , #eee, #FFFFFF 85px) repeat scroll 0 0 transparent;
background: -ms-linear-gradient(center top , #eee, #FFFFFF 85px) repeat scroll 0 0 transparent;
background: linear-gradient(center top , #eee, #FFFFFF 85px) repeat scroll 0 0 transparent;
box-shadow: 0px 0px 5px #888888;
-webkit-border-radius: 0px 10px 10px 10px;
-moz-border-radius: 0px 10px 10px 10px;
border-radius: 0px 10px 10px 10px;
}

#tabs #One:target div,#tabs #Two:target div,#tabs #Three:target div {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100); opacity: 1; visibility: visible;}
4

0 回答 0