1392164 - A combination of drop-cap, float and margin makes text overlap

Status: RESOLVED DUPLICATE of bug 290125

(Core :: Layout: Floats, defect)

Description

[Karl Dubost💡 :karlcow]

Attachment: Blink left, Gecko right

This is a spin-off of https://webcompat.com/issues/9055 of an issue on The Verge website.
I created a reduced test case in https://codepen.io/webcompat/pen/xLWYNW

p {
	font-size: 1.2rem;
}

p::first-letter {
	font-size: 5.2em;
	color: #e5127d;
	float: left;
	margin: 0 .1em -.2em 0;
}

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nam nulla doloribus laudantium! Numquam minima et deleniti velit ea culpa nam dolorum quisquam distinctio laborum in, provident pariatur veniam. Dolorem.</p>


The "L" is overlapping the following line. This is not happening in Chrome, Edge and IE.

Comment 1

[Karl Dubost💡 :karlcow]

This is not happening in Safari too.

Comment 2

[Daniel Holbert [:dholbert]]

This was filed earlier (for The Verge) as bug 1337456, which was duped to bug 290125.

I suppose this should get the same dupe target.