Question

使用以下标记，我创建的图像包含两个浮动文本叠加层，一个用于标题，另一个用于摘要文本。它正在渲染我的愿望，我能够使用整个图像以及标题和＆amp;摘要以访问链接，除了“标题”右侧的区域，直到“摘要”的末尾。这种情况发生在所有浏览器中（IE9及更低版本除外）。任何想法为什么以及如何解决它？

HTML：

<div class="image">
    <a href="Default.aspx"><img src="Assets/Images/Picture.jpg" alt="Picture" /></a>
    <div class="overlay">
        <a href="Default.aspx" class="headline">Headline</a>
        <a href="Default.aspx" class="summary">Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.</a>
    </div>
</div>

CSS：

body {
    border: 0;
    color: #5B6064;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: .75em;
    line-height: 1.6em;
    margin: 0;
    padding: 0;
    background-color: #a5a5a5;
}
a {
    text-decoration: none;
    color: #5B6064;
}
a:visited {
    text-decoration: none;
}
img {
    border: 0;
}
.image {
    position: relative;
    width: 100%;
/* For IE6 */
    display: block;
    overflow: hidden;
}
.overlay {
    position: absolute;
    bottom: 10px;
    left: 0;
    display: block;
}
.headline {
    color: #FFF;
    font: bold 24px/45px Helvetica, Sans-Serif;
    letter-spacing: -1px;
    background: #e87b10;
/* Fallback for older browsers */
    background: rgba(232,123,16,0.8);
    padding: 10px;
    float: left;
    clear: left;
}
.summary {
    max-width: 350px;
    margin-top: 3px;
    color: #FFF;
    font: 14px/14px Helvetica, Sans-Serif;
    letter-spacing: 0;
    background: #e87b10;
/* Fallback for older browsers */
    background: rgba(232,123,16,0.8);
    padding: 10px;
    float: left;
    clear: left;
}
.summary a {
    color: #FFF;
}

Answer 1

我将整个事情包装在a标签中（更干净的代码）。你需要调整一下你的CSS。

编辑

我将div元素更改为span，因此它在语法上是正确的（感谢提醒Phrogz）。由于您的css已为display: block元素div，因此将其更改为span不是问题。

<a href="Default.aspx">
<span class="image">     
  <img src="Assets/Images/Picture.jpg" alt="Picture" />  
  <span class="overlay">         
     <span class="headline">Headline</span>         
     <span class="summary">Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.</span>     
  </span> 
</span>
</a>

Answer 2

标题正在向左浮动。如果删除浮动并添加display：block;到锚点，它将占用整个图像宽度。

CSS内联元素防止悬停

2 个答案: