我们是否可以避免闪烁光标与div重叠

我一直在寻找任何方式来处理光标闪烁在其他div上。为了使我的发言清楚我增加了屏幕截图 - Screen shot in IE 我们是否可以避免闪烁光标与div重叠

对于灰色格是在创建带顶部的固定定位的div。
带左边框的白色区域实际上是一个div属性contentEditable =“true”，它使得可编辑区域变得可编辑。 Imp - 可编辑区域的高度可以随着内容的增加而增加，即我们在那里不能有滚动条。

所以，当内容增长超出屏幕，我们向下滚动，并且如果光标已放置在可编辑区域内，它会显示在功能区上。

如果选择了这些边框，则图像大小可调整的边框也会发生同样的情况。而且，这仅限于IE。没有问题与Firefox和铬。

代码如下：

<head runat="server"> 
<title></title> 
<style type="text/css"> 
    .wrapper { 
     width:960px; 
     height:auto; 
     min-height:600px; 
     margin-left:auto; 
     margin-right:auto; 
     border-left:1px solid #cfcfcf; 
     border-right:1px solid #cfcfcf; 
     box-shadow:0px 10px 10px #6f6f6f; 
     background-color:#ffffff; 
     margin-top:100px; 
    } 
    .container { 
     width:100%; 
     height:auto; 
     min-height:800px; 
     padding:10px; 
     font-family:Arial; 
     border:1px solid #3f3f3f; 
     box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     -webkit-box-sizing:border-box; 
    } 
    .editor-ribbon { 
     height:100px; 
     position:fixed; 
     left:0px; 
     top:0px; 
     width:100%; 
     border-bottom:1px solid #cfcfcf; 
     width:100%; 
     background-color: #ffffff; 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f1f1f1', endColorstr = '#e3e3e3'); 
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f1f1f1', endColorstr = '#e3e3e3')"; 
     background-image: -moz-linear-gradient(top, #f1f1f1, #e3e3e3); 
     background-image: -ms-linear-gradient(top, #f1f1f1, #e3e3e3); 
     background-image: -o-linear-gradient(top, #f1f1f1, #e3e3e3); 
     background-image: -webkit-gradient(linear, center top, center bottom, from(#f1f1f1), to(#e3e3e3)); 
     background-image: -webkit-linear-gradient(top, #f1f1f1, #e3e3e3); 
     background-image: linear-gradient(top, #f1f1f1, #e3e3e3); 
    } 
</style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div class="editor-ribbon"></div> 
    <div class="wrapper"> 
     <div class="container" contenteditable="true"> 

     </div> 
    </div> 
    </form> 
</body>

来源

2013-06-13 Ashmah

你可以尝试使div无法选择：http://stackoverflow.com/questions/924916/is-there-a-way-to-make-a-div-unselectable – Pete

@Peter：感谢这么快响应，但在该区域内，我正在执行简单的文本编辑，例如 - 制作粗体，斜体等，这些选择是不可能的。 – Ashmah

对不起，我认为丝带是眨眼之间的那个，你是否能够创建一个[小提琴]（http://fiddle.jshell.net/）复制错误 – Pete

问题是关系到带的背景过滤器/图像属性。

将背景更改为简单颜色可修复问题。

http://jsfiddle.net/4drs2/6/

.editor-ribbon { 
    height:100px; 
    position:fixed; 
    left:0px; 
    top:0px; 
    width:100%; 
    border-bottom:1px solid #cfcfcf; 
    width:100%; 
    background-color: gray; 
     }

来源

2013-06-13 12:28:22 CodeToad

感谢您的回复，但我认为你可能避开' t用红色，黄色，白色或任何其他浅色试用您的解决方案。它仍然不起作用。 – Ashmah