html - 与 div 元素不同，具有 contenteditable 的 Span 元素不会自然失去焦点

Question

JsFiddle: http://jsfiddle.net/sharat87/qWCQT/

正如您可以(或不能)在上面的 jsfiddle 中看到的那样，当您在带有 contenteditable 的 div 元素下方单击时，它会失去焦点，这是理所当然的。但是，当您对具有 contenteditable 的 span 元素执行相同操作时，它不会失去焦点。此外，具有 display: inline-block 样式的 div 元素在这种情况下的行为与 span 元素完全相同。

在我的应用程序布局中，我需要将 contenteditable 元素显示为 inline-block。但是当点击下面给出的空白区域时它应该失去焦点，这是明确提供的用于失去焦点和特定于上下文的目的。我不希望 contenteditable 元素保持焦点。

除了通过 javascript 处理点击和模糊-ing contenteditable 元素之外，还有什么解决办法吗？

Answer 1

我刚刚根据 Browser 使用 JavaScript 添加了 style/display 属性 并且它起作用了

window.onload=function(){
    var ua=navigator.userAgent;
    var spans=document.getElementsByTagName('span');
    for(i=0;i<spans.length;i++)
    {
        if(spans[i].className=='content')
        {
            if(ua.indexOf('MSIE')!=-1) spans[i].style.display='inline-block'; 
            else spans[i].style.display='inline-table'; 
        }
    }
};

已在 Chrome、FF、IE8 和 Opera 中测试。一个example here .