Css <；a>；悬停不使用子跨度_Css_Hover_Html

Css <；a>；悬停不使用子跨度

css html

Css <；a>；悬停不使用子跨度,css,hover,html,Css,Hover,Html,我有个问题我不明白我正在创建一个收件箱，我希望悬停的邮件更改背景颜色我使用跨距来放置项目，我认为这可能是我在悬停时看不到任何效果的原因这是我的css代码： #mainPanel #inbox h3 #fromSubjectHeader { display: inline-block; font-style:italic; width: 177px; float:left; text-align:left; } #mainPanel #inbox h3 #dateHeader { disp

我有个问题我不明白

我正在创建一个收件箱，我希望悬停的邮件更改背景颜色

我使用跨距来放置项目，我认为这可能是我在悬停时看不到任何效果的原因

这是我的css代码：

#mainPanel #inbox h3 #fromSubjectHeader {
display: inline-block;
font-style:italic;
width: 177px;
float:left;
text-align:left;
}

#mainPanel #inbox h3 #dateHeader {
display:block;
font-style:italic;
width:177px;
text-align: left;
float:left;
}

#mainPanel #inbox a #fromSubject {
display: inline-block;
width: 173px;
float:left;
text-align:left;
padding-left: 4px;
}

#mainPanel #inbox a #date {
display:block;
width:173px;
text-align: left;
float:left;
padding-left: 4px;
}

#mainPanel #inbox a {
font-weight:normal;
text-decoration:none;
color:#000000;
display:block;
font-size:11px;
line-height: 16px;
width:535px;
}

#mainPanel #inbox a #unreadInbox {
font-weight:bold;
color:#165E8A;
}

#mainPanel #inbox a:hover { 
background:#B0DFF2; 
}

在html代码中，它的名称如下

<a>
<span id="fromSubject"></span>
<span id="fromSubject"></span>
<span id="date"></span>
</a>

您应该对

元素应用“clearfix”，因为它的所有内容都是浮动的，这导致

的高度为0

如果您不知道什么是clearfix，请查看各个跨距上的每个样式，将

显示属性设置为内联块
并删除浮动
属性。这将允许a
标记扩展到其内容的高度
#mainPanel #inbox a #fromSubject {
    display: inline-block;
    /* Rest of Styles */
}

#mainPanel #inbox a #date {
   display:inline-block;
   /* Rest of Styles */
}

#mainPanel #inbox a {
  display:inline-block;
  /* Rest of Styles */
}

工作示例上述代码在FireFox和Crome中工作，但在IE中不工作
为此，请将下面的标签放在页面顶部
<!doctype html>

请在上共享您的代码，以便我们可以实时查看您的问题。然后发表后续评论。@Simonmon很高兴我能帮上忙。这是因为浮动块元素的容器不符合实际高度。相反，嵌套元素会溢出高度为0的容器。您可以阅读有关clearfixes的内容，以查看该问题的示例/解决方案。