ELNODE * 电子节点

最近一直在学习 css, 于是就把首页当成试验场. 接着上回的CSS 疑问之一(已解决), 现在又碰到了两个问题.

Q1. 原先为了使首页的竖列式导航栏在鼠标滑过的时候产生变色按钮的效果

#content a:link, #content a:visited {
      padding: 10px 100px;
      color: #667;
      text-decoration: none;
      outline: none;
}

#content a:hover {
      padding: 10px 100px;
      color: #fff;
      background-color: #667;
}

相应的 html 代码为:

<div id="content">
      <a title="土人自由地 Vayn's Weblog" href="/blog/">Weblog</a><br />
      <a title="土人记事簿" href="http://vayn.soup.io/">Notepad</a><br />
      <a title="土星" href="http://planet.vayn.cn/">Planet</a><br />
      <a title="土书馆" href="http://www.vayn.cn/library/">Library</a><br />
      <a title="土助" href="http://www.vayn.cn/service/">Service</a><br />
      <a title="土人部落" href="/phorum5/">Phorum</a>
</div>

这样, 在 ie6, ie7 和 ff 下显示效果都差不多, 就是代码写的难看了一些
我转了一圈,发现没人这样实现按钮效果, 大家似乎用的都是 <li> 标签, 所以我也改用 <li> 替换原来的 <a> 标签

<div id="content">
      <ul>
            <li><a title="土人自由地 Vayn's Weblog" href="/blog/">Weblog</a></li>
            <li><a title="土人记事簿" href="http://vayn.soup.io/">Notepad</a></li>
            <li><a title="土星" href="http://planet.vayn.cn/">Planet</a></li>
            <li><a title="土书馆" href="http://www.vayn.cn/library/">Library</a></li>
            <li><a title="土助" href="http://www.vayn.cn/service/">Service</a></li>
            <li><a title="土人部落" href="/phorum5/">Phorum</a></li>
      </ul>
</div>

css 代码也重新写了一遍:

#content ul {
      margin: 0 auto;
      padding: 0;
      width: 150px;
      list-style-type: none;
}

ul li {
      border: 0 !important;
      border: 1px solid #FFF;
}

#content a {
      display: block;
      color: #667;
      text-decoration: none;
      outline: none;
}

#content a:hover {
      color: #fff;
      background-color: #667;
}

这样就产生了一个问题, 如果我不给 <li> 添加一个 border-width 属性, 在 ie6 下面每个 <li> 好像都会自动添加一个 margin 属性, 导致两个盒子之间产生很大空间.

最后我只能妥协:

ul li {
      border: 0 !important;
      border: 1px solid #FFF;
}

这到底是什么原因造成的呢?

Q2. 换成 <li> 之后, 我给每个 <a> 添加了一个 display: block; 属性, 这时在 ie6 下发生了第二个神奇现象 — 鼠标滑过盒子右侧的时候竟然无任何效果产生
但滑过左边的时候没有问题, 也就是说盒子的右边距与链接内容的长度一样了, 盒子莫明其妙缩水. 在 ie7 和 ff 下没有任何问题.

这是怎么回事, 怎样解决这种情况?

==========================================

我很想用搜索引擎找到答案, 不过我不知道这两个问题应该用什么关键词描述 -_-b

如果你知道为什么的话, 请帮忙解答一下. 谢谢.

update:

两个问题都解决了,

在 Leechael 的帮助下我试了好几种办法, 在这里总结一下:

在做所有工作之前, 先把那个难看的妥协代码删掉

1. 给 li 添加 margin & padding, 并将其设置为 0
失败

2. 将 li 从每行一个改成 <li></li><li></li>
一半成功一半失败吧, 第二个问题没解决

3. 去掉 a 的 display:block 添加 padding
貌似解决, 其实是回到了最初的老路, 失败

4. 给 a 添加 width 和 float, 另外将所有 li 写在一行
依然是一半成功一半失败, 第二个问题没解决, 而且需要在最后的 li 之后添加 <br style=”clear: both” />, 否则 content 的 height 会自动增加, 并且当鼠标触发最后一个 li 的时候 height 回归正常…
p.s. 我发现在 IE6 下, clear: both 和 both: clear 效果一样, 真是神奇啊

5. 给 a 添加 width
成–功–!
原来越简单的方法越有效
至于为什么这样可以解决这个问题我到现在还不清楚, 只能说 IE6 是浏览器世界里的九又四分之三站台, 通过它我们可以到达一个神奇的魔法世界…

最后, 特别感谢 Leechael!