2009-08-19 113 views
0

我有一点与IE7呈现问题(像往常一样)。说有看起来像这样的一个日历控件:在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选项卡似乎卡在“加载...”上。任何人也会遇到这个问题呢?

+0

我不知道它是解析器的交易有多大的浮动所有的输入,但在URL中的东西()标签也许应该加上引号。 – Jess 2009-08-19 20:38:33

+0

引号是可选的,所以不用担心。 http://www.w3.org/TR/CSS21/syndata.html#uri – RwwL 2009-08-19 21:01:47

回答

3

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

<h2>August 2009</h2> 

有了当你浮动元素IE7以及非浮动的人都在同一行上也容易有问题读取任何种类的文本对齐。

我会把它放在div上的某种头标签上,因为它给了它更多的含义和目的。 Divs只是块级标签,像h2's这样的标题标签是块级别的,搜索引擎会看到它们包含重要信息!

+0

这个工作适用于sho。无论如何,标题标签确实对月/年信息有意义。我只是觉得这是一个奇怪的错误,我以前没有遇到过。就像我说的,如果你用定位标签替换输入标签,它就像你期望的那样工作。无论哪种方式,它都是Microsft在IE8中明显固定的东西。 – 2009-08-19 21:29:42

0

尝试通过将它们放在不同的容器中

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