Safari/Firefox 和 Chrome 中的 CSS 不同答案

【问题标题】：CSS different in Safari/Firefox and ChromeSafari/Firefox 和 Chrome 中的 CSS 不同
【发布时间】：2017-06-04 06:44:35
【问题描述】：

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

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

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

你有什么建议吗？

【问题讨论】：

我根本不会在这里使用 text-indent，而只是 list-style-position: outside
请勿在 SO 上共享外部链接。在此处粘贴复制您的问题的相关代码

标签： html css wordpress google-chrome text-indent

【解决方案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>

【讨论】：

非常感谢。我实际上不知道 list-style 属性有这个选项。非常感谢。