Demo 1

Question

这是我上一期的问题的后续行动。感谢“mu太短”，我现在可以用小提琴来证明我的问题了。

我有以下代码。

我希望代码显示文本左侧的列表圆圈，但显示.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

Answer 1

Demo 1

根据我的经验，我做了几件事。最重要的是：

我已将UL向左移动
我已将UL上的所有边距/填充归零（除了填充以便子弹留在那里）
我已将LI

请注意，不同的浏览器在UL和LI上具有不同的边距/填充默认值，因此标准化。

Demo 2

这几乎与上面相同，只是UL没有浮动，而是使用了左边距。

Answer 2

我无法解释为什么IE会像这样胡说八道，除了说IE一直在做这种事情！

解决方案是有条件的评论。

这些允许您仅在IE版本中指向不同的CSS：http://www.quirksmode.org/css/condcom.html

所以

<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->

将目标锁定所有IE版本，就像

一样

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

仅针对IE6。

所以这应该解决你的问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style><!-- 
    .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; }
    --></style>
<!--[if IE]>
<style><!-- 

ul li {
    margin-left: 80px;
    color: red;
}

--></style>
<![endif]-->
</head>

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


</body>
</html>

Answer 3

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

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

我的<li>圈子在IE和Firefox之间的位置不同</li>

3 个答案:

Demo 1

Demo 2