css - 字体更改和 "|"(竖线)在图像下消失

Question

我在处理我正在构建的网站上图片下方的文字时遇到问题:

1) “返回主页”的字体从它设置的 (Georgia, 0.9em) 更改为 Firefox 中的默认字体。它不会在 Safari ( http://ink-12.web5test.terc.edu/img/modelofinteractionfull.cfm) 中执行此操作。

2) 在我添加图像之前页脚看起来很好 ( http://ink-12.web5test.terc.edu/index.cfm )。添加图像后(在 div class=.submenu 内)，我设置的字体 (Georgia, 0.9em) 再次更改为 Firefox 中的默认字体 (http://ink-12.web5test.terc.edu/aboutus/index.cfm)。

插入图片后出现的另一个问题:

1) 在 Firefox 和 Safari 中，页脚的竖线 (|) 在链接之间消失了。当您突出显示文本时，您可以看到这些条实际上仍然存在，但由于某种原因，它们不再显示为白色，因此它们不可见 ( http://ink-12.web5test.terc.edu/aboutus/index.cfm )。但是您可以在主页 ( http://ink-12.web5test.terc.edu/index.cfm ) 上看到它的外观。

我想在下面复制我的代码，但我无法理解如何在此站点上正确设置它的格式，所以我将继续努力。与此同时，有什么想法吗？非常感谢您的帮助!

Answer 1

例如，关于问题1，设置字体系列的唯一CSS规则是

 h1,h2,p,p2,li{ /*group codes for many styles*/
   font-family:"georgia";
 }

它不影响链接，因为它不在任何这些元素内。类似的考虑适用于问题 2。垂直条在那里，它们只是黑色上的黑色。

使用像 http://validator.w3.org 这样的标记验证器查找 HTML 语法错误，修复它们，然后使用 http://jigsaw.w3.org/css-validator/ 处理 CSS 语法错误然后分析逻辑问题。将 Firefox 与 Firebug 一起使用是一个好主意，因为这样您就可以单击任何元素并查看正在对其应用哪些 CSS 规则(如果有的话)。