图像生成顶部边框线

Question

我有一个li标签，当它用鼠标悬停时，背景图像网址被设置为深棕色箭头，如下图所示。

如您所见，图像右上方会产生黑线。我不知道这是如何产生的，我想删除暗线。我该如何解决？

CSS：

#topcol1navtall ul.contactsleftnav li.dash.selected {

    background:#7c6a54 image-url('contact-arrow-nav.png') right no-repeat;
    border-bottom: 2px dotted #f17ca6;
    margin-top: 5px; padding-top: 8px;

}

HTML：

<li class="contact">
  <div class="text">
    <span class="name">
      <!-- / Dynamically loads edit form into right column -->
      <a href="/contacts/6/edit" data-remote="true">asdf, Billy 3 </a>
    </span>
  </div>
</li>

Answer 1

那条线不是黑色的。它与你的背景颜色相同，＃7c6a54。您的图像在第一行像素中是透明的，或者它的一个像素太短并且以某种方式锚定在包含li的底部。

我猜它可能是后者。你的li比你正在使用的背景图像高一个像素。我建议你的背景图像比你需要的高，然后明确地将它锚定到包含元素的顶部或底部，如下所示： background: #7c6a54 image-url(your-url) right top no-repeat;。然后使背景图像高几个像素。确保底部角度不会突然变成垂直线，否则你会有一个奇怪的单像素凹凸。实际上继续角度，以便在那一端保持平滑的线条。

另一种选择是明确声明li的高度（对填充进行调整），但如果某人的浏览器呈现的文本大于您的预期，则会遇到麻烦。如果您要明确声明li的高度，您还应该明确声明li中文本的font-size和line-height（或者它们应该从父元素继承它，但不要保留它机会）。