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选项卡似乎停留在“loading ...”上。有人也遇到过这个问题吗？

Answer 1

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

<h2>August 2009</h2>

当你将浮动元素和非浮动元素都放在同一行时使用ie7，它往往会在读取任何类型的文本对齐时遇到问题。

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

Answer 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;
}

IE7中的渲染问题

2 个答案: