将图像圆角应用于<li>

Question

我使用jQuery插件为<li>创建了一个圆角，但是它在许多浏览器上均不起作用，并且不支持鼠标悬停。

我想知道使用<li>将两个图像（左上角和右上角）用作左侧和右侧的最佳方法是什么。

Answer 1

我见过的最常用的结构是链接内的跨度。

所以像这样：

<li><a><span>Your text here</span></a></li>    

然后，您可以使用链接的悬停状态定位跨度和链接：

a:hover{some rules here}  
a:hover span{some more rules here} 

使其保持某种语义，并且不会在页面上增加太多垃圾。

Answer 2

您可以像这样将Divs放入li的内部：

<li>
  <div class="lefcorner"></div>
  <div class='liContent'>Foo</div>
  <div class='rightcorner'></div>
</li>

这样一来，您不仅可以保留自己的语义，还可以为样式DIV提供跨浏览器的支持。