Span elements with contenteditable don't lose focus naturally, unlike div elements

[FoosseliB]

\[quote\] JsFiddle: http://jsfiddle.net/sharat87/qWCQT/\[/quote\]As you can (or can't) see in the jsfiddle above, when you click below a \[code\]div\[/code\] element with \[code\]contenteditable\[/code\], it loses focus, and rightfully so. But when you do the same thing with a \[code\]span\[/code\] element with \[code\]contenteditable\[/code\], it doesn't lose focus. Also, \[code\]div\[/code\] element with the style \[code\]display: inline-block\[/code\] behaves exactly like the \[code\]span\[/code\] element in this scenario.In my app's layout, I need the \[code\]contenteditable\[/code\] element to display as an \[code\]inline-block\[/code\]. But it should lose focus when clicked on the empty space given below, which is explicitly provided for losing focus and a context specific purpose. I don't want the \[code\]contenteditable\[/code\] element to retain focus.Any way around this, short of handling the click and \[code\]blur\[/code\]-ing the \[code\]contenteditable\[/code\] element through javascript?