html - Safari/Firefox 和 Chrome 中的 CSS 不同

Question

我在 Chrome 中遇到缩进格式问题。我已将缩进设置为 -14px，以便文本对齐。这在 Safari 和 Firefox 开发者版中运行良好，但在 Chrome 中似乎不起作用。Chrome 正在检测类和缩进，但它不知何故需要 -30px 才能正确排列文本。

请参阅手风琴中的“Rubriky”部分以供参考：

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

你有什么建议吗？

Answer 1

您需要将列表位置属性设置为外部。默认情况下，这会将项目符号放在带有缩进的列表项的左侧。所以list-style: outside;会解决这个问题。

.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>