Why do I see extra space after a bullet in UL in Chrome

Running Windows 7, Chrome version 53.0.2785.116 m

It looks like a huge array was added to the ul lists between the bullets and the first character of the li element. I use list-style-position: inside; and this is what seems to add space (and I don't relate to positioning the entire line further - just a space between the marker and the first character.)

The bare bones of HTML5, no other CSS example will show this:

<ul> <li style="list-style-position: inside;">One</li> <li>Two</li> <li>Three</li> </ul> 

Compare the space in the first line with the other two lines.

WHY?! This was a β€œfeature” of the Microsoft Internet Explorer BAD, and I’m sure that Google does not mimic it. The gap seems to be even wider than IE. So now I get extra (and unnecessary) line wraps when viewing a page in Chrome. This means that less content can be placed in a fixed width / height. Or smaller fonts for compensation, etc.

A pool requires only one space between it and the content; act as a space between the text leading to the list and each item in the list.

Does anyone else see this? (This should be just recently, since it was not a problem only last week when I updated the page)

+5
source share
1 answer

In the meantime, I can offer the following workaround:

 li:before { content: "\a0"; display: inline-block; width: 0; margin-left: -.5em; margin-right: -.5em; } 

For instance:

http://dojo.telerik.com/AseNe

I hope you can find a suitable selector (s) that will target all relevant <ul> and do not require changes to the HTML markup.

0
source

All Articles