在li元素中设置背景颜色会导致文本变为透明。 (IE8)

时间:2010-11-09 03:21:03

标签: html css internet-explorer

我有一个包含以下标记的文档:

<li style="background-color: #{background_color}; color: black;">
  <a href="#{url}" title="#{action_name}" style="color: black;"
    <span style='color: black;'>action_name</span>
  </a>
</li>

但是,每当我将background_color设置为任何内容时,都会导致链接文本变为透明。可能导致这种情况的原因是什么?

1 个答案:

答案 0 :(得分:4)

您尚未指定链接颜色 - 仅 的文本颜色相同。对于链接,您希望明确地指定其属性...并且最好不要使用内嵌样式;例如:

<style type="text/css">
    a.mainLink:link { color : black; } //this order is important
    a.mainLink:visited { color : black; } // "L" o "V" e, "H" "A" t e
    a.mainLink:hover { color : white; } // is an easy way to remember.
    a.mainLink:active { color : black; }

    li.mainList { background : #555; }
</style>

然后是您的链接和列表:

<li class="mainList">    
<a href="{url}" title="action_name" class="mainLink">'action_name'</a>
</li>

内嵌样式适用于动态生成的内容,但在外部样式表或<head>标记内定义样式更好(也更可预测)。