2009-08-19 127 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; 
}