ul>li的列表项符号，平时不怎么用，偶尔碰到发现这货还存在兼容问题

ul>li的列表项符号，平时不怎么用，偶尔碰到发现这货还存在兼容问题==

ul>li的列表符号默认的list-style-position:outside，除此之外他还有另外一个值是inside，他们有什么不同呢？

首先看最简单结构，ul列表符号的表现：

<style type="text/css">
     ul,ul li{list-style-type: disc;width: 800px;}
     ul.inside,ul.inside li{list-style-position: inside;}
     ul.outside,ul.outside li{list-style-position: outside;}
</style>

<h5>list-position:outside;内容没有包裹</h5>
<ul class="outside" style="list-style-type:circle;">
    <li>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora rerum et aut error, similique mollitia voluptate quisquam aspernatur, nulla deleniti facilis at consequatur provident, adipisci accusantium dignissimos commodi odit atque.
    </li>
    <li>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, id distinctio sint aperiam. Animi dolor ad velit quo harum, magni atque cum non ab, voluptatum, minus quia pariatur cumque dolorum.
    </li>
</ul>

<h5>list-position:inside;内容没有包裹</h5>
<ul class="inside" style="list-style-type:circle;">
    <li>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora rerum et aut error, similique mollitia voluptate quisquam aspernatur, nulla deleniti facilis at consequatur provident, adipisci accusantium dignissimos commodi odit atque.
    </li>
    <li>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, id distinctio sint aperiam. Animi dolor ad velit quo harum, magni atque cum non ab, voluptatum, minus quia pariatur cumque dolorum.
    </li>
</ul>

inside和outside表现不同的地方就是，符号一个是内容内缩进，一个是在内容外边。这一点在各个浏览器中表现基本一致。

如果我们给li的内容再加一层父级标签又是什么样子的呢？分为两种情况呢：一种是内容的父级标签是一个行内元素，那么他的表现和没有父级标签是一样的，而且在各个浏览器里面的表现基本一致；另一种情况是：父级标签是一个块级容器，那么在各个浏览器下面的变现就有点差别了：

<h5>list-position:outside;内容由p标签包裹</h5>
<ul class="outside" style="list-style-type:circle;">
    <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora rerum et aut error, similique mollitia voluptate quisquam aspernatur, nulla deleniti facilis at consequatur provident, adipisci accusantium dignissimos commodi odit atque.</p>
    </li>
    <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, id distinctio sint aperiam. Animi dolor ad velit quo harum, magni atque cum non ab, voluptatum, minus quia pariatur cumque dolorum.</p>
    </li>
</ul>

<h5>list-position:inside;内容由p标签包裹</h5>
<ul class="inside" style="list-style-type:circle;">
    <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora rerum et aut error, similique mollitia voluptate quisquam aspernatur, nulla deleniti facilis at consequatur provident, adipisci accusantium dignissimos commodi odit atque.</p>
    </li>
    <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, id distinctio sint aperiam. Animi dolor ad velit quo harum, magni atque cum non ab, voluptatum, minus quia pariatur cumque dolorum.</p>
    </li>
</ul>

chorme浏览器没什么问题，表现很完美：

但是ie和火狐就不那么如人意了：

 

如果我们要换一种布局方式呢？左图右文字，文字环绕效果，问题又该来了==

先上demo

<style type="text/css">
     .clearfix:after{content:'';display: table;clear: both;}
     .clearfix{*zoom:1;}
     .left{float: left;}
     ul,ul li{list-style-type: disc;width: 800px;line-height: 1.5em;}
     ul.inside,ul.inside li{list-style-position: inside;}
     ul.outside,ul.outside li{list-style-position: outside;}
     .imgframe{width: 300px;margin-right: 20px;margin-bottom: 20px;}
     .imgframe img{display: block;width: 100%;height: auto;}
</style>

<h5>list-position:inside; 左图右文字，文字环绕 li内容没有父容器包裹</h5>
<div class="clearfix">
     <div class="left">
         <div class="imgframe">
              <img src="http://img2.3lian.com/2014/f5/158/d/88.jpg" alt="">
         </div>
     </div>
     <ul class="inside" style="list-style-type:circle;">
         <li>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora rerum et aut error, similique mollitia voluptate quisquam aspernatur, nulla deleniti facilis at consequatur provident, adipisci accusantium dignissimos commodi odit atque.
         </li>
         <li>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, id distinctio sint aperiam. Animi dolor ad velit quo harum, magni atque cum non ab, voluptatum, minus quia pariatur cumque dolorum.
         </li>
         <li>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora rerum et aut error, similique mollitia voluptate quisquam aspernatur, nulla deleniti facilis at consequatur provident, adipisci accusantium dignissimos commodi odit atque.
         </li>
         <li>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, id distinctio sint aperiam. Animi dolor ad velit quo harum, magni atque cum non ab, voluptatum, minus quia pariatur cumque dolorum.
         </li>
      </ul>
</div>

<h5>list-position:outside; 左图右文字，文字环绕 li内容没有父容器包裹</h5>
<div class="clearfix">
     <div class="left">
         <div class="imgframe">
              <img src="http://img2.3lian.com/2014/f5/158/d/88.jpg" alt="">
         </div>
      </div>
      <ul class="outside" style="list-style-type:circle;">
          <li>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora rerum et aut error, similique mollitia voluptate quisquam aspernatur, nulla deleniti facilis at consequatur provident, adipisci accusantium dignissimos commodi odit atque.
          </li>
          <li>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, id distinctio sint aperiam. Animi dolor ad velit quo harum, magni atque cum non ab, voluptatum, minus quia pariatur cumque dolorum.
          </li>
          <li>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora rerum et aut error, similique mollitia voluptate quisquam aspernatur, nulla deleniti facilis at consequatur provident, adipisci accusantium dignissimos commodi odit atque.
          </li>
          <li>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, id distinctio sint aperiam. Animi dolor ad velit quo harum, magni atque cum non ab, voluptatum, minus quia pariatur cumque dolorum.
          </li>
      </ul>
</div>

先来看一下期望的表现效果：

这是火狐和谷歌表现的效果，符合预期的效果。但是ie这货又有问题了==

 

自己写布局大概不太会发生这种情况，但是如果页面内容是用户用编辑器发布的内容问题就该来了。ueditor段落基本就是p包裹的，再加一个ul列表问题就该来了。木想出来如何解决这么个问题……