一个元素无法显示背景图片

Question

我正在尝试为"a"元素添加背景图像，但它只会显示图像的一部分（因此，如果我将Home设置为值，则显示图像所占用的任何空间，如果该值为空，则不会显示图像的任何内容）。

尽管我已经设置了要显示的"a"元素的宽度和高度。

有人可以帮我吗？

代码。

<div style="width:1200px;height:25px;text-align:left;">
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
</div>

我确定这是一些愚蠢的事情，但我无法找出它是什么。

- Amra

Answer 1

<a> 是一个内联元素。内联元素不能设置宽度和高度。

因此，您需要使用 CSS 属性 display 更改元素的显示模式。

如果您希望元素脱离文本流并被视为块（即：每行一个块，垂直堆叠），请使用 display: block;。

如果您希望元素在位置方面像内联元素一样运作，但具有块状属性，请使用 display: inline-block;。

注意： IE6 支持 <a> 上的 inline-block。在 IE6 中，inline-block 显示样式仅支持具有默认 inline 样式的元素。

- Andrew Moore

---

根据http://www.quirksmode.org/css/display.html的说法，inline-block并不是一个稳定的选项。 - Sampson

根据您发布的同样链接，IE 6/7 仅接受具有自然 display: inline 属性的元素的值。锚点具有自然的 display: inline 属性，因此在该元素上是实心的。我在我的帖子中甚至已经明确说明了这一点。 - Andrew Moore

@Andrew：是的，没错，但你打算为FF2用户做些什么？ - Sampson

@Andrew：完全不是这样。使用block/float可以照顾到IE5.5及以后的所有用户。而使用inline-block会排除FF2用户。 - Sampson

@Jonathan Sampson：那就是个选择。我可以理解企业限制导致人们不升级IE，但我无法理解人们不升级Firefox。在那种情况下，人们是有意识地选择被落下。如果这意味着我要牺牲可维护性，我永远不会支持低于5%的市场份额。 - Andrew Moore

Answer 2

将 display:block; 添加到锚点（block vs inline-block）。不过，一旦你这样做了，你可能需要 float:left; 锚点以使它们并排。如果你选择这条路线，请在所有锚点后面添加一个 clear:both; 的 div。

a.box  { float:left; width:100px; height:25px; margin:0 8px; }
.clear { clear:both; }

<a href="#" class="box">Foo</a> 
<a href="#" class="box">Foo</a> 
<a href="#" class="box">Foo</a> 
<div class="clear"></div>

- Sampson

---

-1：使用 inline-block，在行内元素上 IE6 完全理解，而不是使用浮动。 - Andrew Moore

你仅仅因为这个就给它点踩？ - Sampson

是的，但仔细想想可能有点严厉，投票已移除。 - Andrew Moore

@Andrew：根据quirksmode，在FF2中“inline-block”似乎无效。 - Sampson

@Jonathan Sampson：如今使用Firefox 2的网民不到1％。我们是否仍然要支持IE4和IE5，因为使用它们的人不到1％？您在论点上非常有选择性。 - Andrew Moore

@Andrew：完全不是这样。使用块级元素/浮动可以兼容IE5.5及以上所有浏览器，而使用内联块会排除FF2用户。 - Sampson