Phenomenon
When pressing Enter in a contenteditable element in Firefox, a new <p> paragraph element is created instead of a <div>. This differs from Chrome which creates <div> elements, and can cause CSS styling differences.
Reproduction example
- Focus a contenteditable element
- Type some text
- Press Enter
Observed behavior
- A new
<p>element is created (e.g.,<p><br></p>) - Chrome creates
<div>elements instead - CSS default margins differ between
<p>and<div> - DOM structure is inconsistent across browsers
Expected behavior
- Either
<div>or<p>should be used consistently - Or behavior should be configurable
- CSS styling should account for element type differences
- DOM structure should be normalized
Browser Comparison
- Chrome/Edge: Creates
<div>elements - Firefox: Creates
<p>elements (this case) - Safari: May create
<div>,<p>, or<br>depending on context
Notes and possible direction for workarounds
- Normalize DOM structure after Enter key
- Convert all
<p>elements to<div>for consistency with Chrome - Or convert all
<div>to<p>to match Firefox - Use CSS to normalize margins regardless of element type