Rendering Problem in IE7

Question

Ich habe ein kleines Rendering-Problem mit IE7 (wie üblich). Sagen, dass es ein Kalendersteuerelement ist, das wie folgt aussieht:

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

Die CSS etwas wie folgt aussehen:

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

In IE8 und Firefox das gut aussieht, werden die Tasten nach links und rechts schwebt und Monat und Jahr sind zentriert. Aber IE7 zentriert den Text nicht. Was läuft hier falsch?

Die interessante Sache ist, dass, wenn Sie die Eingabeelemente durch Links ersetzen (wie ich in einem anderen Projekt) dieses Zeug alles gut in IE7 zeigt.

Ein weiteres kleines Problem, die IE Developer Tools irgendwie aufgehört, alle außer den ersten meiner CSS-Dateien zu erkennen, so dass es nicht viel geholfen hat. Die CSS-Registerkarte scheint bei "loading ..." hängen zu bleiben. Ist auch jemand auf dieses Problem gestoßen?

Answer 1

Wenn Sie den Monat und das Jahr in einem eigenen Tag auf Blockebene umbrechen, sollte es in ie7 gut funktionieren.

<h2>August 2009</h2> 

Mit IE7, wenn Sie Elemente sowie nicht-schwebte diejenigen alle auf der gleichen Linie schwebte haben neigt es Probleme beim Lesen jeder Art von Text-Ausrichtung zu haben.

Ich würde es in ein Header-Tag irgendeiner Art über ein Div setzen, weil es mehr Sinn und Zweck gibt. Divs sind nur Block-Level-Tags, Header-Tags wie H2's sind Block-Level und Suchmaschinen sehen, dass sie wichtige Informationen enthalten!

Answer 2

Versuchen Sie, alle Eingänge schwimmend von ihnen in getrennten Behältern

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