Question

我遇到的问题是IE中的contentEditable属性。问题是我得到了调整大小的句柄，并且当它们处于焦点时会在元素周围形成一个粗边框。需要带有高度和高度的样式。知道如何删除它们吗？ CSS或Javascript

一个简单的例子：

<html>
<head>
</head>

<body>

<div contentEditable="true" style="width: 50%; height: 50%; display: table" >
<div contentEditable="true" style="width: 50%; height: 50%; display: table-cell">
<p>aaa</p>
</div>
</div>

</body>
</html>

Answer 1

你需要contentEditable =＆＃34; true＆＃34;定义两次？如果删除第一个，则调整大小句柄会消失，但功能仍然存在。

http://jsfiddle.net/2uphD/1/

Answer 2

我们可以将具有contenteditable值的外部div包装为false以取消调整大小句柄。更新后的jsfiddle

下方

<div>
<div contentEditable="false" style="width:50%; height:50%; display:table" >
    <div contentEditable="true" style="width:50%; height:50%; display:table-cell" >  
        <p>div1</p> 
    </div>  
</div>

<div contentEditable="false" style="width:50%; height:50%; display:table" >
    <div contentEditable="true" style="width:50%; height:50%; display:table-cell" >  
        <p>div2</p> 
    </div>  
</div>

Answer 3

您应该使用 resize: none 来禁用处理程序：

<div 
  contenteditable
  style="max-height:200px;resize: none">
</div>

这种样式可以禁用焦点上的边框：

<style>
[contenteditable]:focus {
    outline: 0px solid transparent;
}
</style>

如何使用contentEditable和大小样式删除调整大小的句柄和div的边框

3 个答案: