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