这是我最后一个问题的后续内容。多亏了"穆太矮了"，我现在可以用小提琴来证明我的问题了。
我有以下代码。
我希望代码将列表圆圈显示在文本的左侧，但显示在.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; }
这是一个小提琴
演示1
根据我的经验，我做了几件事。最重要的是：
- 我已将
UL向左浮动 - 我已经将
UL上的所有边距/填充都归零（除了左边的填充以便项目符号保持不变） - 我已经把
LI上的所有边距/填充都调零了
注意，不同的浏览器对UL和LI的边距/填充有不同的默认值，因此进行了规范化。
演示2
这几乎与上面相同，只是UL没有浮动，而是使用了左边距。
我的CSS不太好，但我认为你需要这样的东西：
.fp1 .col ul { display: inline-block; float: left; margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
我无法解释IE为什么会这样胡说八道，只是说IE总是做这种事情！
解决方案是条件评论。
这些只允许您将不同的css指向IE版本：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>