我们可以避免闪烁的光标与div重叠 [英] Can we avoid blinking cursor overlapping with div
问题描述
我一直在寻找可以处理光标在其他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 -
- 灰色div是在顶部创建色带的固定位置div。
- 白色区域（左侧带有边框）为实际上是一个具有contentContentEditable = true属性的div，它使and可编辑区域。 Imp-可编辑区域的高度可以随内容而增加，即我们在那里不能有滚动条。
因此，当内容超出屏幕上，然后向下滚动，如果光标已放置在可编辑区域内，它将显示在功能区上方。
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.
如果选择了可调整大小的边框，则会发生同样的情况。并且，这仅特定于IE。 Firefox和Chrome没有问题。
Same happens with resizable borders on images if those are selected. And, this is specific to IE only. No issues with firefox and chrome.
代码如下：
<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>
推荐答案
在我看来，您的答案是：不会很快修复
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
与div重叠的闪烁文本光标
Blinking text cursor overlapping with div
状态：已被推迟
说明
输入的文本光标在重叠的div上可见。文本光标不应变为可见，而是停留在重叠的div之下，因为整个输入（或可编辑的文本区域）都位于该div之下。
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.
这篇关于我们可以避免闪烁的光标与div重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
