IE7 渲染问题答案

【问题标题】：Rendering Problem in IE7IE7 渲染问题
【发布时间】：2025-12-13 14:35:01
【问题描述】：

我在使用 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 开发工具不知何故停止识别除了我的第一个 CSS 文件之外的所有文件，所以这并没有太大帮助。 CSS 选项卡似乎停留在“正在加载...”。有人也遇到过这个问题吗？

【问题讨论】：

我不知道这对解析器有多大的影响，但 url() 标签中的内容可能应该用引号引起来。
引号是可选的，所以不用担心。 w3.org/TR/CSS21/syndata.html#uri

标签： css internet-explorer

【解决方案1】：

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

<h2>August 2009</h2>

使用 ie7，当浮动元素和非浮动元素都在同一行时，读取任何类型的文本对齐都会出现问题。

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

【讨论】：

这很有效。无论如何，标题标签对于月/年信息确实有意义。我只是认为这是一个奇怪的错误，我以前没有遇到过。就像我说的，如果你用锚标签替换输入标签，它会像你期望的那样工作。不管怎样，这显然是 Microsft 在 IE8 中修复的。

【解决方案2】：

尝试通过将所有输入放在单独的容器中来浮动所有输入

<div class="calPager">
   <div class="container">
       <div class="floatleft">
           <input type="submit" name="prev" value="Prev" class="pagerPrev" />
       </div>
       <div class="floatright">
           <input type="submit" name="prev" value="Next" class="pagerNext" />
       </div>
   </div>
</div>

.container{
    margin-left:auto;
    margin-right:auto;
    width: .. (if you like);
    /**/
}

.floatleft { 
    float:left;
}

.floatright {
    float:right;
}

【讨论】：