Closed
Bug 1419885
Opened 7 years ago
Closed 7 years ago
Flex items with first-letter pseudo-element cause alignment problems
Categories
(Core :: Layout, defect, P3)
Tracking
()
RESOLVED
DUPLICATE
of bug 385615
People
(Reporter: deusekane, Unassigned)
Details
Attachments
(1 file)
|
1.30 KB,
application/x-zip-compressed
|
Details |
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171112125346
Steps to reproduce:
I created two h1 elements inside a display:flex hgroup. I gave them a first-letter style that changes the font size. I have attatched a minimal sample document that exhibits the problem.
Actual results:
If first-letter is smaller than the usual h1-text, the elements overlap. If the size is larger, then unneccesary padding is placed around the elements, causing them to overflow the parent container. Additionally, if a media-query is triggered that changes the flex-direction to column (in the example document by resizing the window to less than 600px), and then un-triggered, the items display as expected, instead of going back to how they were when first rendered.
Expected results:
The contents of the two h1-items should be displayed one after another, with no more space in between them than is specified by their CSS styles.
|
||
Updated•7 years ago
|
Component: Untriaged → Layout
Product: Firefox → Core
|
||
Updated•7 years ago
|
Priority: -- → P3
|
||
Comment 1•7 years ago
|
||
Hello, everyone!
Regarding this issue:
It feels like the width of the element is calculated based on the font-size of the first letter...
That's really weird.
<!DOCTYPE html>
<html>
<head>
<style>
.a {
font-size: 1rem;
display: inline-block;
background-color: red;
}
.a:first-letter {
font-size: 2rem;
}
.b {
font-size: 2rem;
background-color: red;
}
</style>
</head>
<body>
<span class="a">hello world</span>
<br/><br/>
<span class="b">hello world</span>
</body>
</html>
Flags: needinfo?(bugs)
|
|
||
Updated•7 years ago
|
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Flags: needinfo?(bugs)
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•