IE7中錯位的滑動門

我有一個最初設計用於IE7的web應用程序。我正在重新調整CSS以使應用在最新版本的Chrome中呈現，而不會爲IE7用戶打破它。我在整個站點修復了錯位的滑動門輸入框，但是有一個頁面我無法使用滑動門來對齊IE7和Chrome。安裝程序是非常簡單的：IE7中錯位的滑動門

<span> 
    <input type="text" ... /> 
</span>

在這種情況下，跨度持有推拉門的左側蓋和輸入持有右蓋和車身。我將span和input都設置爲內嵌塊，並且高度相同，沒有邊距或填充。鍍鉻指甲它和它看起來很大，但IE7的渲染輸入1個像素比跨度像這樣低：

需要更多的聲譽，發表圖片

如果我添加-1px上邊距的輸入，然後IE7正確呈現這些東西，Chrome呈現錯位。我試着將這個實例與應用程序中的所有其他滑動門輸入進行比較，這些輸入在IE7和Chrome中都可用，但我不能在我看來有什麼不同。像這樣的問題？

幾乎可以肯定有更好的方式來解決這個問題，但沒有看到它..

添加class到破input如「ie7fix」，則：

/* applies to only ie7 */ 
*+html .ie7fix { 
    margin-top: -1px; 
}

2011-07-20 20:51:24 thirtydot

回答