奇怪的HTML错误

时间:2009-03-13 14:36:24

标签: javascript html css

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

<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>

它是使用iUI框架的iPhone站点的一部分。我知道uiUI更好,但我的老板更喜欢iUI框架的外观,所以我必须使用它。这个框架通过使用'selected =“true”'attr来工作,当链接带你到另一个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,绘画等)会解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

如果可以,尽可能避免负边距。他们会变得非常非常讨厌。

在黑暗中拍摄:

  • 您是否为a:link设置了任何样式,a:已访问,a:悬停?如果没有,则将它们添加到当前样式并再次检查

示例:

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中的一个错误;很明显,它一次工作正常但不是下一个那里有一些有趣的东西。