如何修复此CSS以符合所有浏览器？

Question

使用Google App Engine构建的application此页面显示search results。

在我的笔记本电脑中，设计和字体大小看起来很好（我使用Chrome）;但是在IE桌面上的较大显示中，标题看起来很大，标题下的文字显示为灰色（不应该是）。下面是我正在使用的CSS。感谢您对设计的帮助以及您看到的任何问题。感谢。

身体的css（标题下的文字）：

body { font-size: small; font-family: Verdana, Helvetica, sans-serif; }

标题的CSS：

#large {color: #0066CC; font-size: large; }

css for“comment”

#small {color: #808080; font-size: x-small; }

修改

在IE中我也注意到标题下的文字是灰色的。这是什么原因？这是代码：

        self.response.out.write("""<p>
        <a href="%s"><span id=large>%s</span></a> 
        <a href="/comment?main_id=%s"><span id="small">comments</span></a><br />  
        %s 
        </p>
        """ %           
        (item.url, item.title, main_id, 
        item.pitch))               

Answer 1

尝试使用百分比或像素值代替字体大小的关键字。不同的浏览器会以不同的方式解释这些关键字，这就是您看到差异的原因。

Answer 2

并不是说这是问题的直接原因，但我注意到的第一件事是你使用ID而不是类来设置多个元素的样式。

所以这个：

<span id="small">

应该是：

<span class="small">

您的#small选择器应为.small。同样适用于large。

Zach Rattner应该已经确定了真正的问题。