將圖像圓角應用於<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提供跨瀏覽器的支持。