在做多个系统时都使用到了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; }