在做多个系统时都使用到了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是用H-ui前端框架开发的轻量级网站后台管理模版,采用源生HTML语言,完全免费,简单灵活,兼容性好,让您快速搭建中小型网站后台。H-ui.Admin.page是单页面,没用到iframe,左侧菜单...修复tab bug。
您不用考虑多租户、登录、统一认证中心、权限、菜单管理、系统管理、公共组件、公共api、代码冗余、数据字典、图片库、文件库、智能表单、工作流、微服务互相调用、全局跟踪定位bug、多主键crud,复杂sql查询等各种...
已编译好的github上最新的tez-ui-0.10.1 比apache官网上的都要高一个版本,解决了很多bug
解决vue-cli+Element-ui项目 在使用element的表单验证 会触发多选下拉框的验证bug 并在页面初次加载执行一次校验
在使用vue进行前端开发时,使用element-ui框架,当表格过高时出现滚动条,导致底部行错位,其原因是因为表格固定列的时候,鼠标滚动是内部计算的(详细信息看源码)。谷歌浏览器会发生这种情况,火狐不会发生这种...
Mint UI 是一个基于 Vue.js 的移动端组件库。自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本。本文介绍如何从零开始构建一个使用 Mint UI 的 Vue 项目。
mini-antui 将不再继续维护,源码保留,如有 bug 会在 进行 fix 操作。因此后续所有的版本更新升级将转移到 。品牌虽然改变,但我们的服务不会变,我们将继续为广大阿里小程序开发者服务,感谢各位的支持和鼓励。 ...
JavaScript应用实例-UI验证码(有BUG).js
使用vue+elemetnui框架,采用websql/localsotrage作为数据存储,实现增删改查
开源项目-andlabs-ui.zip,Lightweight cross platform UI framework andlabs/ui sees a couple new bug fixes and renewed activity.
AutoJs源码-UI验证码(有BUG)。本资源购买前提醒:本源码都是实际autojs项目模板,安装好autojs直接运行即可打开。1、支持低版本autojs。2、资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己...
修复ios浏览器局部滚动因不满一屏而引起的bug
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
补充知识:项目总结之关于vue中使用mint-ui的mt-popup出现滚动穿透问题的解决总结 说实话,使用Mint-ui这个ui组件的过程中遇到了很多问题,这个ui组件问题真多。 先说今天的主题吧,我在使用popup选择框的时候和...
开发# 克隆项目git clone https://gitee.com/y_project/RuoYi-Vue# 进入项目目录cd ruoyi-ui# 安装依赖npm install# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的...
本版本修复 JDK的Bug1–数组切割 JDK的Bug2–三元运算符 JDK中不算Bug的Bug–ArrayList可通过构造函数传入非指定泛型的List并在get时出错
自定义element-ui 表格滚动条组件 by Jdes on 2019-02-18 由于 npm 的 OTP 验证问题,原来的 el-table-bar 迁移至 el-table-bar-base 请使用者删除原始包后下载 el-table-bar-base 原有功能不变 update Log v2.1.5 ...
audi-ui, 在 CSS,Vanilla和 HTML,奥迪用户界面组件 AudiAudi组件在 CSS 。... 可以在同一组织帐户的对应知识库中找到互补的字体和图标。...如果你发现了一个 Bug,有任何问题,或者者想要在GitHub上
--解决松果插件SetSize在浏览器最大化时插件无效的问题 --解决部分脚本无法运行的问题 --解决搜索栏粘贴重复的的问题 --解决游戏中输入框输入后按回车无响应的问题 优化 --优化多进程模式,防止网页崩溃,...
基于 Element-UI 二次封装的支持自适应列宽的 table-column 列组件