Question

我有这种结构：

<a onclick="toggle_media_box(); return false;" href="#" class="media_link">
  <div id="media_link" class="media_link"></div>
</a><br />

#media_link {
  background-image: url("/images/media.png");
}

.media_link {
  width: 445px;
  height: 200px;
}

图片大小为445px（但是为620px）。像这样的所有其他链接的大小为620px。

在IE中一切正常，链接大小为445px。但在Firefox和Chrome中，链接仍然是620px宽。 div的大小正确为445px。

怎么办？ <a>代码的大小必须为445px。

有趣的是，该链接确实悬停到445像素的大小，但可点击最大为620像素。

你的约恩。

Answer 1

然后<a>标记是内联元素。因此，它的宽度由标签内文本的长度决定。要解决此问题，您可以将display:block;添加到.media_link课程，它将按预期执行。

Answer 2

float: left上需要display: block或display: inline-block或（理想情况下）a：

.media_link {
    display: inline-block
}

您使用class="media_link"两次#media_link令人困惑。不需要使用<br /> - 您可以将其替换为display: block。

我建议更改为：http://jsfiddle.net/Yg4YN/2/

<a onclick="toggle_media_box(); return false;" href="#" class="media_link">
    <span class="media_span"></span>
</a>

.media_link, .media_span {
    display: block;
    width: 445px;
    height: 200px;
}
.media_span {
    background-image: url("/images/media.png");
}

Answer 3

您的HTML代码目前无效，您应该将锚<a>放在<div>内，而不是相反。

如果您的HTML正确，您可以将锚点设置为display:block并根据需要调整大小。

CSS：通过设置width属性，链接的宽度不会改变

3 个答案: