在IE7和IE8中使用表單元素獲得統一的佈局

Question

看起來，IE7在表單元素上方和下方放置了額外的1px間距。 IE8，FF3.5，Chrome 2 & Opera 9.5正確渲染這些元素而沒有間距。

雖然我想要的是在IE7中顯示器是一樣的，所以是否有某種解決方法讓IE7正確渲染元素？

表單元素（例如輸入框）是否放置在s或s中似乎沒有關係，也沒有關於填充，邊距&間距設置。 （將它們全部設置爲零仍然在輸入框周圍有1px的空間）

Answer 1

我碰到了這個問題，說實話，我並不完全確定我記得修復。我似乎記得它與IE在輸入框的內部和外部添加填充有關，因此無法修復。這是或者是邊界。試試下面的這些，在一起並分別：

input { 
    border: 0; 
    font-size: .9em; 
} 

如果其中的提供你所需要的，我會用像一個條件註釋去：

<!--[if lte IE 7]> 
input { 
    border: 0; 
    font-size: .9em; 
} 
<![endif]--> 

Answer 2

不幸的是，瀏覽器呈現不一致的表單元素高度和寬度。

幸運的是，您的兩個問題孩子是IE6和IE7，這兩個問題很容易使用條件註釋進行定位。沒有看到它們，很難說確切的修復會是什麼，但它可能看起來像這樣：

<!--[if lte IE 7]> 
    <style type="text/css"> 
      input{ padding-top: 3px;) /* 1px less than other browsers */ 
    </style> 
<![endif]-->