将图像圆角应用于<li> </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的跨浏览器支持。