【Bug】OM-UI的omTab的默认样式,在非FF浏览器下无法滚动的问题

在做多个系统时都使用到了om-ui框架的系统,在非FF浏览器下页签上出现较多tab时无法自动滚动。经过多次测试,发现了apusic样式没有这个问题
于是查阅om-apusic.css,找出不同点,然后修改
以前的代码:


.om-tabs .om-tabs-headers {
overflow: hidden;
padding: 2px 0 2px;
position: relative;
_width: 100%;
border:1px solid #86A3C4;
border-bottom-width:0px
}
.om-tabs .om-tabs-headers .om-state-default a{
color: #23466D;
}
.om-tabs .header-no-border{
border-width:0px;
}
.om-tabs .om-tabs-scroll-left {
background : url(images/tabs/om-tabs-scroll-left.gif) no-repeat;
height: 29px;
left: 0;
position: absolute;
top: 1px;
width: 18px;
cursor: pointer;
z-index: 100;
}
.om-tabs .om-tabs-scroll-right {
background : url(images/tabs/om-tabs-scroll-right.gif) no-repeat;
height: 29px;
right: 0;
position: absolute;
top: 1px;
width: 18px;
cursor: pointer;
z-index: 100;
}
.om-tabs .om-tabs-scroll-right:hover {
background-position: -18px 0;
}
.om-tabs .om-tabs-scroll-left:hover {
background-position: -18px 0;
}
.om-tabs .om-tabs-scroll-disabled {
background-position: 0 0 !important;
cursor: default;
filter:alpha(opacity=50); /*IE透明度50%*/
-moz-opacity:0.5; /*Mozilla :Chrome 360 透明度50%*/
opacity: 0.5; /*Firefox Safari Opera透明度50%*/
}
.om-tabs .om-tabs-headers ul {
width: 5000px;
font-size: 12px;
margin: 0 ;
padding: 0 0 0 4px;
border-bottom: 1px solid #86A3C4;
}
.om-tabs .om-tabs-headers ul.om-tabs-scrollable {
padding : 0 23px;
position: relative;
}
.om-tabs .om-tabs-headers ul li {
background: url("images/tabs/om-tabs-bg-d.png") repeat-x scroll 0 0 #DCF0FB;
display: inline-block;
margin: 0 4px -1px 0;
padding: 0;
position : relative;
-moz-user-select: none;
float: left;

}
.om-tabs .om-tabs-headers ul li.om-state-hover{
background: url("images/tabs/om-tabs-bg-h.png") repeat-x scroll 0 0 #DAEAFA;
}
.om-tabs .om-tabs-headers ul li.om-tabs-activated {
border-color: #8DB2E3 #8DB2E3 #FFFFFF;
background: url("images/tabs/om-tabs-bg-a.png") repeat-x scroll 0 0 #FFFFFF;
font-weight: bold;
}
.om-tabs .om-tabs-headers ul li a.om-tabs-inner {
text-align: center;
text-decoration: none;
outline: none;
white-space: nowrap;
float: left;
padding: 0 10px;
}
.om-tabs .om-icon-close {
float: left;
margin: 0.4em 0.2em 0 0;
cursor: pointer;
}
.om-tabs .om-tabs-headers ul li a.om-icon-close{
background: url("images/tabs/om-tabs-closebtn.gif") no-repeat;
display: block;
height: 10px;
width: 10px;
margin: 7px 6px 0 0;
}
.om-tabs .om-tabs-headers ul li.om-state-hover a.om-icon-close{
background-position: 0 -9px;
}

.om-tabs .om-tabs-panels {
overflow: auto;
margin: 0;
padding: 0;
border-width: 0;
position: relative;
}
.om-tabs .om-tabs-panels .om-panel-body{
padding:1em;
}
.om-tabs-noborder {
border-width: 0;
}


修改后的代码:


.om-tabs{

}

.om-tabs .om-tabs-headers {
overflow: hidden;
padding: 2px 0 2px;
position: relative;
_width: 100%;
border:1px solid #86A3C4;
border-bottom-width:0px

}
.om-tabs .header-no-border{

}
.om-tabs .lileft{
/*background: url("images/tabs/om-tabs-left-default.png") no-repeat scroll 0 0 transparent;*/
display: inline-block;
float: left;
height: 27px;
line-height: 27px;
width: 8px;
}
.om-state-active .lileft{
/*background: url("images/tabs/om-tabs-left-hover.png") no-repeat scroll 0 0 transparent;*/
display: inline-block;
float: left;
height: 27px;
line-height: 27px;
width: 8px;
}
.om-tabs .liright{
/*background: url("images/tabs/om-tabs-right-default.png") no-repeat scroll 0 0 transparent;*/
display: inline-block;
float: left;
height: 27px;
line-height: 27px;
width: 3px;
}
.om-state-active .liright{
/*background: url("images/tabs/om-tabs-right-hover.png") no-repeat scroll 0 0 transparent;*/
display: inline-block;
float: left;
height: 27px;
line-height: 27px;
width: 8px;
}

.om-tabs .left-placeholder{
/*background: url("images/tabs/om-tabs-right-default.png") no-repeat scroll 0 0 transparent;*/
display: inline-block;
float: left;
height: 27px;
line-height: 27px;
width: 3px;
margin-left: -3px;
}

.om-tabs .right-placeholder{
/*background: url("images/tabs/om-tabs-left-default.png") no-repeat scroll 0 0 transparent;*/
display: inline-block;
float: left;
height: 27px;
line-height: 27px;
width: 8px;
}
.om-tabs-panels .om-panel-body{
background-color: white;
}
.om-tabs .om-tabs-headers .om-state-default a{
color: #1E1E1E;
}
.om-tabs .om-tabs-scroll-left {
background : url(images/tabs/om-tabs-scroll-left.gif) no-repeat;
background-position: 0px 0px !important;
height: 29px;
left: 0;
position: absolute;
top: 1px;
width: 18px;
cursor: pointer;
z-index: 100;
}
.om-tabs .om-tabs-scroll-right {
background : url(images/tabs/om-tabs-scroll-right.gif) no-repeat;
background-position: -18px 0px !important;
height: 29px;
right: 0;
position: absolute;
top: 1px;
width: 18px;
cursor: pointer;
z-index: 100;
}
.om-tabs .om-tabs-scroll-right:hover {
background : url(images/tabs/om-tabs-scroll-right.gif) no-repeat;
background-position: 0px 0px !important;
}
.om-tabs .om-tabs-scroll-left:hover {
background : url(images/tabs/om-tabs-scroll-left.gif) no-repeat;
background-position: -18px 0px !important;
}
.om-tabs .om-tabs-headers .om-tabs-scroll-disabled-left{
background : none;
border-right:none;
cursor: default;
}
.om-tabs .om-tabs-headers .om-tabs-scroll-disabled-right {
background : none;
cursor: default;
}
.om-tabs .om-tabs-headers ul {
width: 5000px;
font-size: 12px;
margin: 0;
padding: 0 0 0 4px;
border-bottom: 1px solid #86A3C4;
}
.om-tabs .om-tabs-headers ul.om-tabs-scrollable {
padding : 0 23px;
position: relative;
}
.om-tabs .om-tabs-headers ul li {
background: url("images/tabs/om-tabs-bg-d.png") repeat-x scroll 0 0 #DCF0FB;
display: inline-block;
margin: 0 4px -1px 0;
padding: 0;
position: relative;
-moz-user-select: none;
float: left;
}
.om-tabs .om-tabs-headers ul li.om-state-hover a.om-tabs-inner{
color: #004098;
}

.om-tabs .om-tabs-headers ul li.om-tabs-activated {
border-color: #8DB2E3 #8DB2E3 #FFFFFF;
background: url("images/tabs/om-tabs-bg-a.png") repeat-x scroll 0 0 #FFFFFF;
font-weight: bold;
}
.om-tabs .om-tabs-headers ul li.om-tabs-activated a.om-tabs-inner {
color : black;
padding: 0 10px;
}
.om-tabs .om-tabs-headers ul li a.om-tabs-inner {
text-align: center;
text-decoration: none;
outline: none;
white-space: nowrap;
float: left;
padding: 0 10px;
}
.om-tabs .om-icon-close {
float: left;
margin: 0.4em 0.2em 0 0;
cursor: pointer;
}
.om-tabs .om-tabs-headers ul li a.om-icon-close{
background: url("images/tabs/om-tabs-closebtn.gif") no-repeat;
display: block;
height: 10px;
width: 10px;
margin: 7px 6px 0 0;
}
.om-tabs .om-tabs-headers ul li.om-state-hover a.om-icon-close{
background-position: 0 -9px;
}
.om-tabs .om-tabs-panels {
overflow: auto;
margin: 0;
padding: 0;
border-width: 0;
position: relative;
}
.om-tabs .om-tabs-panels .om-panel-body{
padding:1em;
}
.om-tabs-noborder {
border-width: 0;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值