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

RESOLVED DUPLICATE of bug 290125

Status

()

Core
Layout: Floats
RESOLVED DUPLICATE of bug 290125
11 months ago
11 months ago

People

(Reporter: karlcow, Unassigned)

Tracking

57 Branch
All
Unspecified
Points:
---
Bug Flags:
webcompat ?

Firefox Tracking Flags

(firefox57 affected)

Details

(Whiteboard: [webcompat] [css])

Attachments

(1 attachment)

Created attachment 8899326 [details]
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.
Flags: webcompat?
Whiteboard: [webcompat] [css]
This is not happening in Safari too.
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.
Status: NEW → RESOLVED
Last Resolved: 11 months ago
Resolution: --- → DUPLICATE
Duplicate of bug: 290125
You need to log in before you can comment on or make changes to this bug.