1

他の div の上で点滅するカーソルを処理できる方法を探していました。私の声明を明確にするために、スクリーンショットを追加しています-IEでのスクリーンショット

  1. 灰色の div は、リボンを作成する上部に固定配置された div です。
  2. 左側に境界線のある白い領域は、実際には属性 contentEditable="true" を持つ div であり、編集可能な領域を作成します。Imp- 編集可能領域の高さは、コンテンツによって大きくすることができます。つまり、そこにスクロールバーを配置することはできません。

そのため、コンテンツが画面を超えて拡大し、下にスクロールすると、カーソルが編集可能領域内に配置されている場合、リボンの上に表示されます。

それらが選択されている場合、画像のサイズ変更可能な境界線でも同じことが起こります。そして、これは IE のみに固有のものです。firefox と 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>
4

3 に答える 3

1

あなたの答えは次のように思われます：それはすぐには修正されません

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

divと重なるテキストカーソルの点滅

ステータス : 延期のためクローズ

説明

重複する div の上に入力のテキスト カーソルが表示されます。入力全体 (または編集可能なテキスト領域) がその div の下にとどまるため、テキスト カーソルは表示されませんが、重複する div の下にとどまります。

于 2016-11-08T08:11:41.280 に答える
0

この問題は、リボンの背景フィルター/画像のプロパティに関連しています。

背景を単純な色に変更すると、問題が解決します。

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-13T12:28:22.023 に答える