Firefox浮动定位和Firefox div：悬停不起作用应该如何？

Question

我正在研究一种棘手的样式，它可以在Safari / Webkit上运行，但不适用于Firefox / Gecko。我无法弄清楚出了什么问题。

这是我正在使用的HTML：

<div class="showcase"><a href=><div class="showtit"><span class="showname">Stripes!</span> <span class="showtype">a theme</span> <span class="showdate">October 2009</span></div></a></div>

因此，它创建了Showcase div，然后在其中创建一个包含Showtit div（用于定位）的链接，然后是Showname，Showtype和Showdate spans。以下是这些的风格：

.showcase {
 border-bottom-color: #eeeeee;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 font-size: 20pt;

}

.showtit {
 text-align: left;

 width: 800px;
 margin: 0 auto;
 padding: 20;
}

.showtit:hover{background-color: #3f3f3f;}

a .showcase {
  color: black;
}

.showcase:hover {
 background-color: #3f3f3f;
 color: white;

}
.showcase a{color:black;}
.showcase a:hover {background-color: #3f3f3f;
 color: white;}


.showtype {
 text-transform: lowercase;
 font-size: 0.7em;
 color: #cecece;
}
.showdate {
 z-index: 0;
 top: 0.35em;
 float: right;
 position: relative;
 font-size: 0.7em;
 color: #cecece;
}

凌乱的代码，我知道，但这是在我尝试堵塞我能想到的每一个泄漏之后。现在，在Safari上，这段代码会产生如下布局：

中间盘旋的地方。但是在Firefox上，我得到了这个：

同样的中间盘旋。因此div背景悬停不起作用，而且，我在右边对齐的跨度不是自己对齐。

这是为什么？我该如何解决？我如何确定这种情况再也不会发生？

Answer 1

您的代码存在一些问题：

• 在HTML 4.01或XHTML 1.0中，您不能在内联元素（a）中使用块元素（div）
• 如果您使用的是“严格”Doctype，则可以将伪类“悬停”仅应用于链接元素

我建议使用以下代码：

<style>
div.showcase {
 border: 1px solid #EEE;
  font-size: 20pt;
 }
 div.showcase a{
  display: block;
  width: 100%;
  color:black;
  /*center the "a" tag in IE6 */
  text-align: center;
 }
 div.showcase a:hover{
  background-color: #3f3f3f;
  color: white;
 }
 div.showcase #content{
  display: block;
  width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: left;
 }


span.showtype {
  text-transform: lowercase;
  font-size: 0.7em;
  color: #cecece;
}

span.showdate {
  z-index: 0;
  top: 0.35em;
  float: right;
  position: relative;
  font-size: 0.7em;
  color: #cecece;
}
</style>

<div class="showcase">
 <a href="#">
     <span id="content">
            <span class="showname">Stripes!</span>
            <span class="showtype">a theme</span>
            <span class="showdate">October 2009</span>
     </span>
  </a>
</div>

请注意，在FF中，包含“Stripes！”的两个跨度并且“一个主题”没有对齐，而且你在IE6中有一个很大的对齐问题（我没有用其他版本测试代码）。

---

编辑：要向右浮动“showdate”范围，只需向右移动一个浮点数并将html代码放在另外两个跨度之前... margin-top修复了对齐问题：

<style>
span.showdate {
    margin-top: 7px;
    float: right;
    font-size: 0.7em;
    color: #cecece;
}
</style>


<div class="showcase">
 <a href="#">
     <span id="content">
            <span class="showdate">October 2009</span>
            <span class="showname">Stripes!</span>
            <span class="showtype">a theme</span>
     </span>
  </a>
</div> 

您必须使用CSS来对齐span“s”“showsame”和“showtype”;我不知道你想要完成什么，但我建议用下面的html替换这两个span：

<span class="showname">Stripes! <small>a theme</small></span>