Open
Bug 1477964
Opened 6 years ago
Updated 2 years ago
[CSS] Incorrect baseline alignment of Grid items that contain inline-blocks
Categories
(Core :: Layout: Block and Inline, defect, P3)
Tracking
()
NEW
People
(Reporter: ilya.streltsin, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36 Steps to reproduce: 1. Open the following jsFiddle demo with Firefox: http://jsfiddle.net/qf15s3zv/3/. There are three containers (one Flex container and two Grid containers) with two adjacent items in each. Each item has a header inside that is set to display: inline-block. 2. Compare the vertical alignment of the two adjacent items in the three containers (one Flex container and two Grid containers). Actual results: In the second example, the items are aligned by the top instead of the baseline. Expected results: In all three examples, both items should be aligned by their (first) baseline, which is the last line of the text in the inline-block header because the content of their first line is the inline-block element. Chrome and Edge render this example as expected.
Reporter | ||
Comment 1•6 years ago
|
||
For some unclear reason, setting the block element *inside* the inline-block the definite width which is not larger than the container width fixes the alignment of the items (the third example). Unfortunately, percentage widths don't have this effect. I hope this helps to find the cause of the issue.
Comment 2•6 years ago
|
||
I managed to reproduce this issue on Nightly 63.0a1 (2018-07-26), Firefox 62.0b11 and Firefox 61.0.1, on Windows 10, Ubuntu 16.04 and Mac OSx.
Status: UNCONFIRMED → NEW
status-firefox61:
--- → affected
status-firefox62:
--- → affected
status-firefox63:
--- → affected
Component: Untriaged → Layout: Block and Inline
Ever confirmed: true
OS: Unspecified → All
Product: Firefox → Core
Version: 61 Branch → Trunk
Updated•6 years ago
|
Priority: -- → P3
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•