Safari/Firefox 和 Chrome 中的 CSS 不同

Question

I'm having issues with indent formatting in Chrome. I have set the indent to be -14px, so that the text lines up. This works fine in Safari and Firefox Developer Edition, however does not seem to work in Chrome. Chrome is detecting the class and the indent, but it somehow needs -30px for the text to be lined up correctly.

Please see the "Rubriky" section in the accordion for reference:

http://marianrehak.cz/dcd/reseller-magazine-online/

Do you have any suggestions?

Answer 1

You need to have your list position property set to outside. This will by default sit the bullets to the left of the list items with an indent. So list-style: outside; will solve this.

 .mytest { list-style: square outside; }

 <ul class="mytest"> <li>bal 1</li> <li>bal 2 add her come lot of test so we get line wrap, add her come lot of test so we get line wrapadd her come lot of test so we get line wrap, add her come lot of test so we get line wrapadd her come lot of test so we get line wrap, add her come lot of test so we get line wrapadd her come lot of test so we get line wrap, add her come lot of test so we get line wrapadd her come lot of test so we get line wrap, add her come lot of test so we get line wrapadd her come lot of test so we get line wrap, add her come lot of test so we get line wrapadd her come lot of test so we get line wrap, add her come lot of test so we get line wrapadd her come lot of test so we get line wrap, add her come lot of test so we get line wrap</li> <li>bal 3</li> <li>bal 4</li> <li>bal 5</li> <li>bal 6</li> <li>bal 7</li> <li>bal 8</li> <li>bal 9</li> <li>bal 10</li> <li>bal 11</li> </ul>