CSS背景图像链接

将背景图像与CSS链接会给我带来很多问题。它们看起来很简单，但我不能完全避开它们：

我有主菜单的列表项：

<div id="menuContainer">
 <ul id="menu">
 <a href="#"><li id="home" title="Home" alt="Home">Home</li></a>
 <a href="#"><li id="current" title="Current Students" alt="Current Students">Current Students</li></a>
 <a href="#"><li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li></a>
 <a href="#"><li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li></a>
 <a href="#"><li id="visitors" title="Visitors" alt="Visitors">Visitors</li></a>
 </ul>

我的css将li设置为内联块，并相应地定义id的大小和背景图像。我必须使用缩放：1；和*显示：内联；对于IE来说，现在一切都很好

当我使用文本缩进时：-9999px；为了删除文本并留下图像，Chrome和Firefox可以很好地处理这个问题。然而，在IE中，整个li移动列出的像素数

最后，在Chrome中，整个图像是链接，在IE和Firefox中，只有文本是链接，因此没有文本，菜单就没有功能

---

有什么想法吗？

您使用的HTML语法不正确。不能将

包裹在

周围。虽然解决这个问题不一定能解决问题，但它可能会确保每个浏览器的行为方式相同

你不太清楚你想要实现什么，你的菜单是什么样子的。如果你想让

的整个区域变得可点击，你最好给

一个

显示：内联块和固定尺寸

如果您需要更详细的答案，您可以给我们一个在线示例。
您使用的HTML语法不正确。不能将
包裹在
周围。虽然解决这个问题不一定能解决问题，但它可能会确保每个浏览器的行为方式相同

你不太清楚你想要实现什么，你的菜单是什么样子的。如果你想让
的整个区域变得可点击，你最好给
一个
显示：内联块和固定尺寸

如果您需要更详细的答案，您可能希望给我们一个在线示例。
首先将html格式化，然后重试css

<ul id="menu">
   <li id="home" title="Home" alt="Home"><a href="#">Home</a></li>
   <li id="current" title="Current Students" alt="Current Students"> <a href="#">Current Students</a></li>
   <li id="prospective" title="Prospective Students" alt="Prospective Students"><a href="#">Prospective Students</a></li>
   <li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff"><a href="#">Faculty & Staff</a></li>
   <li id="visitors" title="Visitors" alt="Visitors"> <a href="#">Visitors</a></li>
</ul>








首先构建html，然后再次尝试css

<ul id="menu">
   <li id="home" title="Home" alt="Home"><a href="#">Home</a></li>
   <li id="current" title="Current Students" alt="Current Students"> <a href="#">Current Students</a></li>
   <li id="prospective" title="Prospective Students" alt="Prospective Students"><a href="#">Prospective Students</a></li>
   <li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff"><a href="#">Faculty & Staff</a></li>
   <li id="visitors" title="Visitors" alt="Visitors"> <a href="#">Visitors</a></li>
</ul>








最好使用行高而不是文本缩进。您需要使用图像替换技术。像这样

<ul id="menu">
  <li><a href="#" title=""><span>Home</span></a></li>
</ul>

最好使用行高而不是文本缩进。您需要使用图像替换技术。像这样

<ul id="menu">
  <li><a href="#" title=""><span>Home</span></a></li>
</ul>

我按照你的建议格式化了html。我也有顶部菜单的选项，我想你需要给
元素与你给周围
元素的大小相同。如果
是'display:block或inline block'，这应该可以工作。至于页脚，我不知道你指的是什么图像。你能澄清一下吗？
同样需要
显示：块
或
内联块
和显式宽度/高度设置。否则，链接的可单击区域将仅到达其文本。对于页脚图像，我从未定义过显示、宽度和高度。我明白你的意思，同意你的看法。奇怪的是页脚链接仍然有效。我重新编辑了html:
元素与你给周围
元素的大小相同。如果
是'display:block或inline block'，这应该可以工作。至于页脚，我不知道你指的是什么图像。你能澄清一下吗？
同样需要
显示：块
或
内联块
和显式宽度/高度设置。否则，链接的可单击区域将仅到达其文本。对于页脚图像，我从未定义过显示、宽度和高度。我明白你的意思，同意你的看法。奇怪的是页脚链接仍然有效。我重新编辑了html:
包裹起来，它们工作得非常完美。我甚至修改了我的菜单，菜单不会做出同样的反应。这没有影响。我的页脚链接将
包裹起来，它们工作得非常完美。我甚至修改了我的菜单，菜单不会有同样的反应。除了像素代码的反应（我在下面附议）之外，你的
标签不能像你现在有它们一样。“alt”和“title”不是附加到
标记的属性。即使您希望编写不正确的HTML，也应该这样做：
STUFF
。当然，正确的方法是
东西
。除了pixeltocode的响应（在下面是我的第二个响应），你的
标签不能像你现在有它们一样。“alt”和“title”不是附加到
标记的属性。即使你想写得不正确