html - 具有内部位置的有序列表中第二行的跨浏览器缩进 - 不可能？

Question

我已经在这里阅读了几个小时的主题，但找不到解决方案。

我想创建一个有序列表，满足这些要求:

1. 需要有 inside position 效果，所以 bullet 到 text 没有太大的 margin。

2. 第二行必须缩进，以便与文本对齐。

3. 必须在所有浏览器(从 IE7 及更高版本)上以相同的方式工作。

一个。此解决方案仅适用于 chrome(在 FF 和 IE 中存在偏差，css 重置没有帮助):

<ol type="1" style="list-style-position:inside; margin:0px; padding-left:15px;">
        <li>Text</li>
        <li>Text</li>
        <li  style="margin: 0px; padding: 0px;
    text-indent: -1em; margin-left: 1em;">longer Text, longer Text, longer Text, longer Text<br>
second line of longer Text</li>
</ol>

B.此解决方案不适用于 IE7，元素符号消失(虽然没有偏差):

http://jsfiddle.net/4rnNK/1/

谢谢

Answer 1

可能会晚一点，但这里有一个解决方案:

CSS:

    ol,li {
      margin: 0;
      padding: 0;
    }

    ol {
      padding-left: 30px;
    }

    li {
      margin: 0 0 15px -5px;
    }

    li span {
      position: relative;
      left: -10px;
    }

and HTML:

<p>
  Lorem ipsum dolor sit amet fugit error quae unde omnis aut aut, eos ut ratione omnis laudantium ab sit architecto nemo perspiciatis quasi doloremque voluptatem sunt ipsam ratione aperiam aperiam, aperiam error beatae voluptas aut doloremque eaque sit ut inventore ut omnis omnis, 
</p>

<ol>
  <li>
    <span>
      omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </span>
  </li>
  <li>
    <span>
      omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </span>
  </li>
</ol>

这是一个显示结果的 fiddle :jsfiddle