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

I have this construction:

我有这个结构：

<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;
}

Size of the picture is 445px (but was 620px). All other links like this have the size 620px.

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

In the IE everything works fine and the link is 445px of size. But in Firefox and Chrome the link is still 620px wide. The div has the right size of 445px.

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

What to do? The <a> tag must have the size of 445px.

该怎么办？标签的大小必须为445px。

Interesting thing is, the link does hover up to the size of 445px, but is clickable up to the size of 620px.

有趣的是，链接确实悬停到445px的大小，但可点击到620px的大小。

Yours Joern.

你的约恩。

3 个解决方案

#1

Then <a> tag is an inline element. Therefore it's width is determined by the length of the text within the tag. To fix this you can add display:block; to your .media_link class and it will perform as expected.

然后标签是内联元素。因此，它的宽度由标签内文本的长度决定。要修复此问题，您可以添加display：block;到.media_link类，它将按预期执行。

#2

You need float: left or display: block or (ideally) display: inline-block on the a:

你需要float：left或display：block或（理想情况下）显示：a上的inline-block：

.media_link {
    display: inline-block
}

Your usage of class="media_link" twice and #media_link is confusing. Using a <br /> is not required - you can replace that with display: block.

你使用class =“media_link”两次和#media_link是令人困惑的。使用
不是必需的 - 您可以用display：block替换它。

I recommend changing to this: http://jsfiddle.net/Yg4YN/2/

我建议改为：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");
}

#3

Your HTML code is currently invalid and you should put the anchor <a> inside the <div> rather than the other way around.

您的HTML代码目前无效，您应该将锚放在

中，而不是相反。

Once you've got your HTML the right way round, you can set your anchor to display:block and size it as required.

一旦你以正确的方式获得HTML，你可以设置你的锚点来显示：根据需要阻止和调整它。

#1