javascript - 奇怪的 html 错误

Question

我有一个链接列表，这些链接表现出一些非常奇怪的行为。代码是:

<ul id="home" class="panel" title="title_here" selected="true">
   <li><a href="#search">Search for Name</a></li>
   <li><a href="#browse">Browse by Department</a></li>
</ul>

它是 iPhone 网站的一部分，使用 iUI 框架。我知道 uiUI 更好，但我的老板更喜欢 iUI 框架的外观，所以我必须使用它。这个框架通过使用'selected="true"' 属性来工作，当一个链接将你带到不同的 id 时，使用 js 将 'selected="true"' 添加到你链接到的 id。

我的问题是: 当您点击一个链接，然后返回“后退”时，可点击部分将变为仅链接的背景图片，而不是整个“li”。这是 CSS:

body > ul > li > a {
display: block;
margin: -8px 0 -8px -10px;
padding: 8px 32px 8px 10px;
text-decoration: none;
color: inherit;
background: url(listArrow.png) no-repeat right center;
}

扩大实际图像尺寸(在 PS、绘图等中)是否可以解决这个问题？

Answer 1

如果可以，请尽可能避免负利润。它们会变得非常非常讨厌。

在黑暗中拍摄:

• 您是否为 a:link、a:visited、a:hover 设置了任何样式？如果不是，则将它们添加到当前样式并再次检查

例子:

body > ul > li > a,
body > ul > li > a:link,
body > ul > li > a:visited,
body > ul > li > a:hover,
body > ul > li > a:active {
  display: block;
  margin: -8px 0 -8px -10px;
  padding: 8px 32px 8px 10px;
  text-decoration: none;
  color: inherit;
  background: url(listArrow.png) no-repeat right center;
}

• 尝试为 LI 设置填充，而不是为 A 设置负边距；

• 尝试将背景设置为 LI 而不是 A，如果设计允许的话，并去掉 A 中的填充。

在我看来，这实际上是 iPhone/iUI 中的一个错误；很明显，它有一次工作正常，但下一次就不行了，那里发生了一些有趣的事情。