css - IE7 渲染问题

Question

我在使用 IE7 时遇到了一点渲染问题(和往常一样)。假设有一个如下所示的日历控件:

<div class="calPager">
    <input type="submit" name="prev" value="Prev" class="pagerPrev" />
    <input type="submit" name="prev" value="Next" class="pagerNext" />
    August 2009
</div>

CSS 看起来像这样:

.calPager {
    text-align: center;
    height: 30px;
    line-height: 30px;
}

input.pagerPrev, input.pagerNext {
    height: 30px;
    text-decoration: none;
    border: none;
}

input.pagerPrev {
    float: left;
    padding-left: 28px;
    background: url(../images/calPrevArrow.png) no-repeat;
}

input.pagerNext {
    float: right;
    padding-right: 28px;
    background: url(../images/calNextArrow.png) right no-repeat;
}

在 IE8 和 Firefox 中，这看起来不错，按钮向左和向右浮动，月份和年份居中。但 IE7 不会将文本居中。这里出了什么问题？

有趣的是，如果你用链接替换输入元素(就像我在另一个元素中所做的那样)，这些东西在 IE7 中显示得很好。

另一个小问题，IE Developer 工具以某种方式停止识别除了第一个 CSS 文件之外的所有文件，所以这并没有太大帮助。 CSS 选项卡似乎停留在“正在加载...”上。有人也遇到过这个问题吗？

Answer 1

如果您将月份和年份包装在其自己的 block 级标记中，那么它在 ie7 中应该可以正常工作。

<h2>August 2009</h2>

对于 ie7，当 float 元素和非 float 元素都在同一行时，它往往会在读取任何类型的文本对齐时出现问题。

我会把它放在 div 之上的某种标题标记中，因为它赋予它更多的意义和目的。 div 只是 block 级标签，像 h2 这样的标题标签是 block 级标签，搜索引擎会看到它们包含重要信息!