css - IE和Firefox中<li>圈子的位置不同

这是我最后一个问题的跟进。由于“亩太短”，我现在可以在小提琴中证明我的问题。

我有以下代码。

我希望代码将列表圆圈显示在文本的左侧，但在.img DIV的右侧。这可以在Firefox和Opera中使用，但在IE中它们位于最左侧。我不明白为什么它们在两种浏览器中的位置不同。帮助将不胜感激。

<div class="fp1">
    <div class="col">
      <div class="img" id="img1"></div>
                        <ul>
                        <li><span>Test </span></li>
                        <li><span>Test </span></li>
                        <li><span>Test </span></li>
                        </ul>
      </div>
</div>

.fp1 .row   { overflow: hidden;  }
.fp1 .img   { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0;
    background: yellow; no-repeat scroll 0 0 transparent; }

.fp1 .col   { float: left; width:50%; margin:0px; }
.fp1 .col ul      { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
.fp1 .col ul span { color:#222; font-size: 0.85em; }
.fp1 .col ul li   { line-height:15px; }

这是一个fiddle

最佳答案

我的CSS不好，但是我认为您需要这样的东西：

.fp1 .col ul      { display: inline-block; float: left; margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}