Question

将背景图像与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设置为inline-block，并相应地定义了带有大小和背景图像的id。我不得不使用zoom：1;和*显示：内联;因为IE可以正常工作，IE现在一切都很好。

当我使用text-indent时：-9999px;为了删除文本并保留图像，Chrome和Firefox可以正常使用。但是，在IE中，整个li会改变列出的像素数。

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

有什么想法吗？

Answer 1

您使用的是语法错误的HTML。您无法将<a>包裹在<li>附近。虽然修复此问题可能不一定会使您的问题消失，但它可能会确保每个浏览器的行为方式相同。

您不清楚自己想要达到的目标，以及菜单的样子。如果您希望<li>的整个区域变为可点击，那么您可能最好给<a> display: inline-block一个固定尺寸。

如果您需要更详细的答案，可以向我们提供一个在线示例。

Answer 2

首先好好形成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>

Answer 3

最好使用line-height而不是text-indent。你需要使用图像替换技术。像这样

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

和CSS

ul#menu li a { width: 100px; height: 20px; background: url(../images/myimage.gif) no-repeat 0 0; }
ul#menu li span { line-height: 200px; display: block; }

CSS背景图片链接

3 个答案: