Question

我曾尝试使用jQuery插件来为我的<li>创建圆角，但它在许多浏览器上无法工作，也不支持鼠标悬停。

我在想，如何使用两个图像（左上角和右上角），作为使用 <li> 的左侧和右侧的最佳方式。

Answer 1

您可以像这样在li中放置Div：

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

这样你们俩就能保持语义，同时也可以拥有DIV的跨浏览器支持样式。

Answer 2

我见过最常用于此的结构是链接中的跨度。

有些像：

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

您可以使用链接的悬停状态来定位 span 和链接：

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

这保持了它的语义化，而不会增加太多杂乱的东西到页面上。