Firefox 浮动定位和 Firefox div:hover 不工作应该如何处理？

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 跨度。这就是所有的样式：

.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 中，您不能在内联元素中使用块元素（div）（a）
• 如果您使用“严格”Doctype，则只能应用伪类“hover”要链接元素，

我建议使用下面的代码：

<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代码放置在其他两个跨度之前...边距顶部修复了对齐问题：

<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 来对齐跨度“showname”和“showtype”；我不知道你想要完成什么，但我建议用下面的 html 替换这两个 span：

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