我們是否可以避免閃爍光標與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