用户登录   新用户注册
主题: kindeditor4.1.4 状态栏显示BUG
作者: BingGo, 发布日期: 2012-12-14 13:12:56, 浏览数: 5543

操作系统: windows7

浏览器版本: IE9

KindEditor版本: 4.1.4

BUG再现步骤:
1.iframe 中的 div 标签中 放置kindeditor，div中style="overflow-y: auto;"

2.使竖向滚动条出现
3.滚动滚动条kindeditor中调节高度的div class=ke-statusbar" 出现显示错误，随滚动条滚动。

 


 期望结果: 不随滚动条滚动

 

处理方法：default.css 中 .ke-statusbar{position:relative;}去掉这个属性。

作者: Roddy, 发布日期: 2012-12-14 14:36:10
不太明白，把HTML代码贴上来吧。
回复
作者: BingGo, 发布日期: 2012-12-14 15:17:24

回复Roddy：情况可能比较特殊，方便通过别的方式直接沟通吗？

 

首先用到iframe,iframe里面的页面放置div,并且div出现滚动条，以上条件不一定是必须，

这个时候滚动滚动条，class="ke-statusbar" 这个div会跟滚动条滚动，时editor看上去像分成了两个部分

回复
作者: Roddy, 发布日期: 2012-12-14 23:30:10
回复BingGo：听起来好像是和页面其它代码发生冲突引起fixed效果，单独用position:relative不会有这种问题的。
回复
作者: BingGo, 发布日期: 2012-12-18 09:16:10
回复Roddy：position:relative,去掉不会有问题为什么不去掉呢  ？
回复
作者: Roddy, 发布日期: 2012-12-18 11:57:29
回复BingGo：不能去掉，用于定位右下脚的拖动小图标。
回复
作者: BingGo, 发布日期: 2013-01-10 11:52:53

好久没有里，今天重新整理了下此问题。

操作系统: windows7

浏览器版本: IE9

KindEditor版本: 4.1.4

BUG再现步骤:
1.iframe 中的 div 标签中 放置kindeditor，div中style="overflow-y: auto;"

2.使竖向滚动条出现
3.滚动滚动条kindeditor中调节高度的div class=ke-statusbar" 出现显示错误，随滚动条滚动。

 

回复Roddy：描述中漏掉了一点,浏览器F12后选择选择IE7模式,我这里没有直接用IE7测试,应该存在同样的问题.

注意事项：

1、iframe中内容较多，且出现滚动条

2、div固定高度出现滚动条

3、iframe滚动后出现上述问题

回复
作者: BingGo, 发布日期: 2013-01-10 11:58:38

回复Roddy：

代码如下：

index.html主页面

<iframe style="min-height:776px;*height:776px;" name="content" height="120%" width="100%" src="content.html" border="0" frameborder="0" scrolling="no"> 浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。</iframe>

 

content.html内容页面

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>统计系统</title>
<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 font-size: 12px;
}
img {
 border:0px;
}
.webSite {font-size: 12px; font-weight: bold; }
.pageToolbar {
 color: #03515d;
 font-size: 12px;
}
.row tr{
 background-color: #FFFFFF;
}
.row tr:hover{
 background-color: #b5d6e6;
}
.tablehead td{
 background-image:url('/OxO/images/logon/sysman/bg.gif');
 height:22px;
 font-size: 12px;
}
.tabletxt td{
 height:20px;
 font-size: 12px;
}
.tabletxt td a{
 color: #03515d;
 font-size: 12px;
 text-decoration: none;
}
.tabletxt td a:hover{
 color:#FF0000;
}
.tabletxt td .searchLab{
 color:#115586;
}
.tabletxt td .searchLab:hover{
 color:#FF0000;
}
.link{
 color:#000000;
 text-decoration: none;
}
.schc input,.schc select{
 margin-left:10px;
}
-->
</style>
<link rel="stylesheet" href="themes/default/default.css" />
<script charset="utf-8" src="kindeditor-min.js"></script>
<script charset="utf-8" src="lang/zh_CN.js"></script>
<script>
var  highlightcolor='#c1ebff';
//此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:(
var  clickcolor='#51b2f6';
function G(id){
 return document.getElementById(id);
}
function  changeto(){
 source=event.srcElement;
 if  (source.tagName=="TR"||source.tagName=="TABLE")
  return;
 while(source.tagName!="TD")
  source=source.parentElement;
 source=source.parentElement;
 cs  =  source.children;
 //alert(cs.length);
 if  (cs[1].style.backgroundColor!=highlightcolor&&source.id!="nc"&&cs[1].style.backgroundColor!=clickcolor){
  for(i=0;i<cs.length;i++){
   cs[i].style.backgroundColor=highlightcolor;
  }
 }
}

function  changeback(){
 if  (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="nc")
  return
 if  (event.toElement!=source&&cs[1].style.backgroundColor!=clickcolor){
  //source.style.backgroundColor=originalcolor
  for(i=0;i<cs.length;i++){
   cs[i].style.backgroundColor="";
  }
 }
}

function  clickto(){
 source=event.srcElement;
 if  (source.tagName=="TR"||source.tagName=="TABLE")
  return;
 while(source.tagName!="TD")
  source=source.parentElement;
 source=source.parentElement;
 cs  =  source.children;
 //alert(cs.length);
 if  (cs[1].style.backgroundColor!=clickcolor&&source.id!="nc"){
  for(i=0;i<cs.length;i++){
   cs[i].style.backgroundColor=clickcolor;
  }
 }
 else{
  for(i=0;i<cs.length;i++){
   cs[i].style.backgroundColor="";
  }
 }
}
</script>

</head>

<body>
<form action="doAdd.jsp" method="post">
<input type="hidden" name="id" value="lab_bscy_jz"/>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="30" background="/OxO/images/logon/sysman/tab_05.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="12" height="30"><img src="/OxO/images/logon/sysman/tab_03.gif" width="12" height="30" /></td>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="46%" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="5%"><div align="center"><img src="/OxO/images/logon/sysman/tb.gif" width="16" height="16" /></div></td>
                <td width="95%"><span class="webSite">你当前的位置：计划与总结</span></td>
              </tr>
            </table></td>
            <td width="54%">&nbsp;</td>
          </tr>
        </table></td>
        <td width="16"><img src="/OxO/images/logon/sysman/tab_07.gif" width="16" height="30" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="8" background="/OxO/images/logon/sysman/tab_12.gif">&nbsp;</td>
        <td>
        <div style="height:486px;overflow-y:auto;overflow-x:hidden;">
        <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="b5d6e6" onmouseover="changeto()"  onmouseout="changeback()" class="row">
          <tr class="tablehead">
            <td width="90" align="center" style="padding:0px;">名称</td>
            <td align="center" style="padding:0px;">内容</td>
          </tr>
      
        
     
        
     
        
         <tr class="tabletxt">
              <td width="90" align="right" valign="top" style="padding-top:10px;">标题</td>
              <td id="bscy_jz_bt_td">
             
              <input type="text" id="_bscy_jz_bt" name="_bscy_jz_bt" style="width:99%;" value="" title="标题"/>
             
             
             
              
              
              
              
              
              
     </td>
         </tr>
        
     
        
         <tr class="tabletxt">
              <td width="90" align="right" valign="top" style="padding-top:10px;">内容</td>
              <td id="bscy_jz_nr_td">
             
             
             
             
             
              
              
              
              
               <textarea id="_bscy_jz_nr" name="_bscy_jz_nr" style="width:99%;height:200px;visibility:hidden;" title=""></textarea>
               <script>
          KindEditor.basePath = '';
          KindEditor.create('textarea[name="_bscy_jz_nr"]', {
              uploadJson : '/OxO/upload_json.jsp',
              fileManagerJson : '/OxO/file_manager_json.jsp',
           allowFileManager : true
          });
               </script>
              
              
              
     </td>
         </tr>
        
     
        
         <tr class="tabletxt">
              <td width="90" align="right" valign="top" style="padding-top:10px;">发布人</td>
              <td id="bscy_jz_xm_td">
             
             
             
             
             
               <select id="_bscy_jz_xm" name="_bscy_jz_xm" style="width:;" title="填写发布人名称" >
                
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="王丽军" title="王丽军" >王丽军</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="王媛" title="王媛" >王媛</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="缪蕾" title="缪蕾" >缪蕾</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="高峰" title="高峰" >高峰</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="张东雁" title="张东雁" >张东雁</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="黎鑫" title="黎鑫" >黎鑫</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="王然" title="王然" >王然</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="李朝翠" title="李朝翠" >李朝翠</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="温振宁" title="温振宁" >温振宁</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="徐则" title="徐则" >徐则</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="钟心" title="钟心" >钟心</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="艾芳" title="艾芳" >艾芳</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="魏剑" title="魏剑" >魏剑</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="栾硕" title="栾硕" >栾硕</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="陈兆旺" title="陈兆旺" >陈兆旺</option>
                 
                
               </select>
             
              
              
              
              
              
              
     </td>
         </tr>
        
     
        
         <tr class="tabletxt">
              <td width="90" align="right" valign="top" style="padding-top:10px;">发布时间</td>
              <td id="bscy_jz_fbsj_td">
             
             
             
              <input type="text" id="_bscy_jz_fbsj" name="_bscy_jz_fbsj" value="2013-01-10" style="width:;" onClick="showcalendar(event, this);" onFocus="showcalendar(event, this);if(this.value=='0000-00-00')this.value=''" readonly title=""/>
             
              
              
              
              
              
              
     </td>
         </tr>
     
        
         <tr class="tabletxt">
              <td width="90" align="right" valign="top" style="padding-top:10px;">发布人</td>
              <td id="bscy_jz_xm_td">
             
             
             
             
             
               <select id="_bscy_jz_xm" name="_bscy_jz_xm" style="width:;" title="填写发布人名称" >
                
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="王丽军" title="王丽军" >王丽军</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="王媛" title="王媛" >王媛</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="缪蕾" title="缪蕾" >缪蕾</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="高峰" title="高峰" >高峰</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="张东雁" title="张东雁" >张东雁</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="黎鑫" title="黎鑫" >黎鑫</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="王然" title="王然" >王然</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="李朝翠" title="李朝翠" >李朝翠</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="温振宁" title="温振宁" >温振宁</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="徐则" title="徐则" >徐则</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="钟心" title="钟心" >钟心</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="艾芳" title="艾芳" >艾芳</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="魏剑" title="魏剑" >魏剑</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="栾硕" title="栾硕" >栾硕</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="陈兆旺" title="陈兆旺" >陈兆旺</option>
                 
                
               </select>
             
              
              
              
              
              
              
     </td>
         </tr>
        
     
        
         <tr class="tabletxt">
              <td width="90" align="right" valign="top" style="padding-top:10px;">发布时间</td>
              <td id="bscy_jz_fbsj_td">
             
             
             
              <input type="text" id="_bscy_jz_fbsj" name="_bscy_jz_fbsj" value="2013-01-10" style="width:;" onClick="showcalendar(event, this);" onFocus="showcalendar(event, this);if(this.value=='0000-00-00')this.value=''" readonly title=""/>
             
              
              
              
              
              
              
     </td>
         </tr>
     
        
         <tr class="tabletxt">
              <td width="90" align="right" valign="top" style="padding-top:10px;">发布人</td>
              <td id="bscy_jz_xm_td">
             
             
             
             
             
               <select id="_bscy_jz_xm" name="_bscy_jz_xm" style="width:;" title="填写发布人名称" >
                
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="王丽军" title="王丽军" >王丽军</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="王媛" title="王媛" >王媛</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="缪蕾" title="缪蕾" >缪蕾</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="高峰" title="高峰" >高峰</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="张东雁" title="张东雁" >张东雁</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="黎鑫" title="黎鑫" >黎鑫</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="王然" title="王然" >王然</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="李朝翠" title="李朝翠" >李朝翠</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="温振宁" title="温振宁" >温振宁</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="徐则" title="徐则" >徐则</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="钟心" title="钟心" >钟心</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="艾芳" title="艾芳" >艾芳</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="魏剑" title="魏剑" >魏剑</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="栾硕" title="栾硕" >栾硕</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="陈兆旺" title="陈兆旺" >陈兆旺</option>
                 
                
               </select>
             
              
              
              
              
              
              
     </td>
         </tr>
        
     
        
         <tr class="tabletxt">
              <td width="90" align="right" valign="top" style="padding-top:10px;">发布时间</td>
              <td id="bscy_jz_fbsj_td">
             
             
             
              <input type="text" id="_bscy_jz_fbsj" name="_bscy_jz_fbsj" value="2013-01-10" style="width:;" onClick="showcalendar(event, this);" onFocus="showcalendar(event, this);if(this.value=='0000-00-00')this.value=''" readonly title=""/>
             
              
              
              
              
              
              
     </td>
         </tr>
     
        
         <tr class="tabletxt">
              <td width="90" align="right" valign="top" style="padding-top:10px;">发布人</td>
              <td id="bscy_jz_xm_td">
             
             
             
             
             
               <select id="_bscy_jz_xm" name="_bscy_jz_xm" style="width:;" title="填写发布人名称" >
                
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="王丽军" title="王丽军" >王丽军</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="王媛" title="王媛" >王媛</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="缪蕾" title="缪蕾" >缪蕾</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="高峰" title="高峰" >高峰</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="张东雁" title="张东雁" >张东雁</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="黎鑫" title="黎鑫" >黎鑫</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="王然" title="王然" >王然</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="李朝翠" title="李朝翠" >李朝翠</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="温振宁" title="温振宁" >温振宁</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="徐则" title="徐则" >徐则</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="钟心" title="钟心" >钟心</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="艾芳" title="艾芳" >艾芳</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="魏剑" title="魏剑" >魏剑</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="栾硕" title="栾硕" >栾硕</option>
                 
                
                 <!-- 非系统管理员的安全控制 -->
                 
                  <option value="陈兆旺" title="陈兆旺" >陈兆旺</option>
                 
                
               </select>
             
              
              
              
              
              
              
     </td>
         </tr>
        
     
        
         <tr class="tabletxt">
              <td width="90" align="right" valign="top" style="padding-top:10px;">发布时间</td>
              <td id="bscy_jz_fbsj_td">
             
             
             
              <input type="text" id="_bscy_jz_fbsj" name="_bscy_jz_fbsj" value="2013-01-10" style="width:;" onClick="showcalendar(event, this);" onFocus="showcalendar(event, this);if(this.value=='0000-00-00')this.value=''" readonly title=""/>
             
              
              
              
              
              
              
     </td>
         </tr>
     
        
         <tr class="tabletxt">
              <td width="90" align="right" valign="top" style="padding-
回复
作者: BingGo, 发布日期: 2013-01-10 12:00:29

回复Roddy：

问题应该是IE7下出现此类问题。希望改进，呵呵

回复
发表新帖 发表回复