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规则适用于它。

Answer 2

我不确定这是否会对你有所帮助，但我建议你确认“格鲁吉亚”是否会被大写。我可能错了，但怀疑某些浏览器可能没有拿起名称，因为它与字体的名称不完全匹配。

比较示例之间的管道（垂直条字符'|'）显示CSS中的一个小缺陷。管道不在<a>标签内，因此即使您将所有<a>设置为白色，管道也不会更改。在一个示例中（http://ink-12.web5test.terc.edu/index.cfm），管道包含在<p2>标记中，这个标记在我检查的时候不是有效的HTML标记，但除此之外。 <p2>的颜色设置为白色，使其内部的管道变白。在另一个示例（http://ink-12.web5test.terc.edu/aboutus/index.cfm）中，管道由<div>包含，其颜色设置为黑色，使管道变黑，但<a> s设置为白色。由于你的背景也是黑色的，管道也会消失。

Answer 3

对于“|”问题添加以下

skeleton.css line＃161

.footerlinks {
    padding-top: 0.5em;
    color: #fff;
}

对于链接问题，它在我看来，当您悬停时字体变为粗体。您只需要定义悬停状态......

fonts.css第4行

a:hover {
   font-weight: normal;
}

Answer 4

抱歉，这是一个简单的修复！我对编码非常陌生（因为我确信你可以通过我的样式表中可疑的标记量来判断）。我不知道链接可以拥有所有自己的字体系列，并认为如果你把它保存在标题或段落标记之间，它只会接受它。但我现在明白了，谢谢你！

字体更改和“|” （垂直条）在图像下消失

4 个答案: