Question

在http://biteof.com/units_and_evidence/看到我的页面，在Firefox中，一切都显示完美。但是在IE中，应该在h2内部浮动的“顶部”按钮称为“单元301：预生产技能”，向右浮动但被推到标题之外。

有人能看出为什么会这样吗？

HTML：

<h2>
Unit 301: Pre-production skills
<a class="top" href="http://biteof.com/units_and_evidence/#top"/>
</h2>

CSS：

h2 {
  background:#235ec9 0 0;
  color:#ffffff;
  display:block;
  font-size:16px;
  height:40px;
  line-height:40px;
  margin:10px 0 10px -12px;
  padding-bottom:0;
  padding-left:10px;
  padding-right:10px;
  padding-top:0;
  text-indent:30px;
  width:880px;
  clear:both;
}
a.top:hover {
  background-position:0 -40px;
}
a.top {
  background-image:url(images/top.gif);
  background-position:0 0;
  display:block;
  float:right;
  height:40px;
  width:55px;
}

Answer 1

将浮动的a放在html代码的左侧，如下所示：

<h2>
<a class="top" href="http://biteof.com/units_and_evidence/#top"/>
Unit 301: Pre-production skills
</h2>

Answer 2

我认为它是display:inline-block; .top，因为IE不支持该属性。如果您将其更改为display:block;或仅将其删除，会发生什么？

漂浮在容器下面

2 个答案: