Can we avoid blinking cursor overlapping with div

I was looking for any way we can handle the cursor blinking over other div. To make my statement clear I am adding a screen shot -

The Gray colored div is a fixed positioned div at the top that creates the ribbon.
White area with border at the left is actually a div with attribute contentEditable="true", which makes and editable area. Imp- Height of the editable region can be increased with content, i.e. we cannot have a scrollbar there.

So, when content grows beyond the screen and we scroll down, and if cursor has been placed inside the editable region it appears over the ribbon.

Same happens with resizable borders on images if those are selected. And, this is specific to IE only. No issues with firefox and chrome.

Code is below :

<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>

回答1:

it seems to me that your answer would be: it won't be fixed any soon

https://connect.microsoft.com/IE/feedback/details/841043/blinking-text-cursor-overlapping-with-div

Blinking text cursor overlapping with div

Status : Closed as Postponed

Description

Text cursor of an input becomes visible over the overlapping div. Text cursor should not become visible, but stay under the overlapping div, since the whole input (or an editable textarea) stay below that div.

回答2:

the problem is related to the background filter/image properties of the ribbon.

changing background to a simple color fixes the problem.

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;
        }

回答3:

I had the same issue, the way I resolved was to add blur() function to the input involved it means every time the user the user scrolls the document fire the blur() function.

Disadvantage
The input lost the focus when the user is scrolling.