将图像圆角应用于 <li>

【问题标题】：Applying image rounded corners to <li>将图像圆角应用于 <li>
【发布时间】：2010-09-24 00:59:52
【问题描述】：

我正在使用 jQuery 插件为我的<li> 创建一个圆角，但它不适用于很多浏览器并且不支持鼠标悬停。

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

【问题讨论】：

【解决方案1】：

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

类似：

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

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

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

保持它有点语义，并且不会给页面添加太多垃圾。

【讨论】：

【解决方案2】：

你可以像这样将 Divs 放在你的 li 中：

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

这样您既可以保持语义，也可以跨浏览器支持设置 DIV 样式。

【讨论】：