Bug 17757 – <br />'s as direct children of <ul> between every two adjecent <li> elements causes misalignment

• Status: REOPENED
• Component: Layout and Rendering

[jasneet]

I Steps:
Go to
http://www.92wy.com/

II Issue:
Notice the space between the 2 adjacent lines in center column.

III Conclusion: for the problem of line height
   It seems there are two problems:

       <ul>
           <li>Some text</li>
           <br/>
           <li>Some text</li>
       </ul>

  The page uses <br /> as direct child of <ul>, after each </li> (and before next <li>). IE ignores </li>, and assumes that the contents of every <li> element ends before next <li>. This causes the difference between IE and Safari. (No blank line between list items in IE; one blank line in Safari) Firefox does the same thing as Safari.

       <ul>
           <li>Some text</li>
           <br style="line-height: 0px" />
           <li>Some text</li>
       </ul>

  If setting line-height to 0px for <br> element, it has no effect in Safari and the blank between list items remains. However, it does affect the layout in Firefox.

IV Other browsers:
IE7: ok
FF2: partially ok
Opera: partially  ok

V Nightly tested: 30236

[jasneet]

Created attachment 19649 [details]
screenshot

[jasneet]

Created attachment 19650 [details]
reduction

[Robert Hogan]

Everyone else renders the reduction consistently - zero line-height <br> tags do not create space between the list elements.

[Ahmad Saleem]

I am still able to reproduce this bug using Safari Technology Preview 164 with attached 'reduction' and it does show extra space compared to Chrome Canary 112 and Firefox Nightly 112 in following test case:

0 line-height <br />'s as direct children of <ul> between every two adjecent <li> elements.

CCing others so they can add it to Radar as well.

[Ahmad Saleem]

(In reply to Ahmad Saleem from comment #4)
> I am still able to reproduce this bug using Safari Technology Preview 164
> with attached 'reduction' and it does show extra space compared to Chrome
> Canary 112 and Firefox Nightly 112 in following test case:
> 
> 0 line-height <br />'s as direct children of <ul> between every two adjecent
> <li> elements.
> 
> CCing others so they can add it to Radar as well.

Seems like Safari Technology Preview 173 is working fine now and matching other browsers.

Marking this as 'RESOLVED CONFIGURATION CHANGED'.

[alan]

Created attachment 466946 [details]
Test reduction with no list items

[alan]

Created attachment 466947 [details]
Test reduction with no list item

[alan]

(In reply to Ahmad Saleem from comment #5)
> (In reply to Ahmad Saleem from comment #4)
> > I am still able to reproduce this bug using Safari Technology Preview 164
> > with attached 'reduction' and it does show extra space compared to Chrome
> > Canary 112 and Firefox Nightly 112 in following test case:
> > 
> > 0 line-height <br />'s as direct children of <ul> between every two adjecent
> > <li> elements.
> > 
> > CCing others so they can add it to Radar as well.
> 
> Seems like Safari Technology Preview 173 is working fine now and matching
> other browsers.
> 
> Marking this as 'RESOLVED CONFIGURATION CHANGED'.
I am still seeing the broken behavior on trunk. This is caused by the fact that WebKit does not treat <br> as an inline box/fails to take line-height into account when computing the line box height. Do you mind testing it again, please? (I also attached a simpler reduction with no list items)

[Ahmad Saleem]

Created attachment 466954 [details]
Safari & WebKit ToT vs Chrome & Firefox

@Alan - Thanks for new test, indeed it is still broken. Attaching screenshot of new test across all browsers.