`

【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;
}
分享到:
评论

相关推荐

    H-ui.admin.page后台管理模版 3.1.1.2

    H-ui.admin.page是用H-ui前端框架开发的轻量级网站后台管理模版,采用源生HTML语言,完全免费,简单灵活,兼容性好,让您快速搭建中小型网站后台。H-ui.Admin.page是单页面,没用到iframe,左侧菜单...修复tab bug。

    element-ui本地可直接使用的包,V2.8.2

    在没有网络的情况下,将压缩包中的文件放入项目并按上述步骤配置,可以确保 Element UI 正常工作。这在离线环境或者需要快速部署的应用场景中非常有用。同时,由于 Element UI 的广泛使用和良好的社区支持,遇到问题...

    vue+element-ui+websql

    4. 浏览器兼容性检查:确保在多种浏览器环境下应用都能正常工作。 5. 数据迁移:在WebSQL向localStorage的切换过程中,应确保数据迁移的正确性。 总的来说,"vue+element-ui+websql"的项目展示了如何利用现代前端...

    element-ui-2.13.0.rar

    7. **性能优化**:Element UI 在组件的设计和实现过程中考虑了性能问题,如懒加载、虚拟滚动等,旨在减少页面渲染时的负担,提高用户体验。 8. **社区支持**:Element UI 拥有活跃的社区,开发者可以在这里找到问题...

    H-ui.admin v3.1 master后台模板

    《H-ui.admin v3.1:打造高效便捷的后台管理模板》 H-ui.admin v3.1是一款专为后台管理系统设计的前端框架,它以其简洁、直观、高效的特性深受开发者喜爱。这款模板不仅提供了丰富的界面元素和交互设计,还包含了...

    Atom-atom-genesis-ui,atom文本编辑器的自定义ui主题(失效)。贡献给Heycalaway/Atom.zip

    - 代码错误或设计缺陷:可能存在未修复的bug或设计上的问题,导致主题无法正确应用。 虽然"Atom-atom-genesis-ui"主题目前可能已失效,但这个例子提醒我们,对于开源项目来说,持续的维护和支持至关重要。同时,这...

    基于Vue框架的element-ui离线文档

    Element UI 的离线文档正是为了方便开发者在没有网络连接的情况下也能查阅和学习这个组件库。 首先,让我们详细了解一下 `package.json` 文件。这是 Node.js 和 npm(Node包管理器)项目的核心配置文件,包含了项目...

    element-ui版本号2.15.12的包

    在IT行业中,UI设计是构建用户界面的关键部分,而Element UI则是前端开发中广泛使用的UI框架之一。Element UI版本号2.15.12的包是一个特定的更新,包含了该框架的一些修复和改进,旨在优化开发者的使用体验。在这个...

    H-ui.admin.page.zip 升级版会后台管理系统

    4. **兼容性**:该系统兼容多种主流浏览器,确保在不同环境下稳定运行,满足多平台使用需求。 二、Java后端技术在H-ui.admin.page中的应用 1. **Spring框架**:H-ui.admin.page的后端很可能基于Spring框架构建,...

    各种浏览器的默认css 样式

    在网页设计和开发中,了解不同浏览器的默认CSS样式至关重要,因为这直接影响到网页在不同环境下的呈现效果。本文将详细探讨各种浏览器,包括IE(Internet Explorer)的多个版本、Firefox(火狐)等,它们对CSS样式的...

    jquery-ui-1.8.16.custom

    1.8.16 版本是该库的一个稳定版本,提供了许多经过优化的功能和修复的bug,确保了在各种浏览器中的兼容性。 2. **自定义构建** "custom" 这一标签表明这是一个根据特定需求定制的jQuery UI 版本。用户可以通过在线...

    mdp-sys-ui-web旨在为企业开发管理类的业务系统提供一个模板工程,该模板工程具有高效率、低代码、功能丰富等特点

    您不用考虑多租户、登录、统一认证中心、权限、菜单管理、系统管理、公共组件、公共api、代码冗余、数据字典、图片库、文件库、智能表单、工作流、微服务互相调用、全局跟踪定位bug、多主键crud,复杂sql查询等各种...

    已编译好的github上最新的tez-ui-0.10.1

    已编译好的github上最新的tez-ui-0.10.1 比apache官网上的都要高一个版本,解决了很多bug

    jquery-ui-1.8.13

    - 在1.8.13版本中,jQuery UI 已经相当成熟,修复了许多已知的bug,并对性能进行了优化,保证了稳定性和兼容性。 - 此版本包含了所有基本的UI组件和特效,可以满足大部分开发需求。 - 支持CSS类名的定制,使得在...

    element-ui-api 离线文档

    10. **社区支持**:Element UI 有一个活跃的社区,开发者可以通过离线文档结合社区论坛和 Stack Overflow 等平台的问题与解答,解决遇到的问题。 总之,Element UI 离线文档是开发者必备的参考资料,无论是在项目...

    element-ui V 2.12.0 lib

    3. **Bug修复**:修复了之前版本中已知的问题,增强了软件的稳定性和可靠性。 4. **文档更新**:更新了组件的文档,添加了新的示例,或者改进了现有的说明,帮助开发者更好地理解和使用。 5. **兼容性改进**:可能对...

    jquery -ui-1.7.2

    此外,1.7.2 版本可能还修复了一些已知的 bug,确保了在不同浏览器和设备上的兼容性,这对于跨平台的 web 开发至关重要。同时,API 的调整和完善,使得开发者在使用过程中更加方便,提高了开发效率。 在实际使用中...

    unity ngui-next-gen-ui 2022.06.08 -2022.05.13-2021.11.30合集

    - **兼容性问题**:虽然NGUI在很多项目中表现优秀,但随着Unity引擎的发展,Unity官方推出了新的UI系统UI Toolkit,对于新项目,开发者可能需要考虑是否继续使用NGUI或转向官方推荐的UI方案。 总的来说,Unity3D中...

    Element-ui 多选.md

    解决vue-cli+Element-ui项目 在使用element的表单验证 会触发多选下拉框的验证bug 并在页面初次加载执行一次校验

    H-ui.admin.page_v3.1.1.2.zip

    3.1.1.2意味着该模板在前几个版本的基础上进行了功能优化和bug修复,确保了稳定性和兼容性。 在实际应用中,H-ui.admin.page提供的主要功能包括: 1. **响应式布局**:此模板采用响应式设计,能够自动适应不同设备...

Global site tag (gtag.js) - Google Analytics