CSS形式ie7 bug，剩余邊距和浮動

Question

這個css代碼對ie7有麻煩。 在ie6中是完全絕對的混亂。
問題是輸入文本框得到低於標簽。 只有解決方法是將div向左浮動，但是在調整大小時會出現問題。

fieldset.label_side > label {
    width: 100px;
    position: relative;
    float: left;
    left: 0;
    padding: 18px 20px 8px;
    border-right: 1px solid #eee;
    clear: left;
    line-height: normal;
}
fieldset label{
        font-size: 13px;
    font-weight: bold;
    padding: 15px 20px 10px;
    margin-right: 10px;
    display: inline-block;
    color: #333;
}

fieldset.label_side > div {
    width: auto;
    margin-left: 140px;
    padding: 15px 20px;
    border-left: 1px solid #eee;
    clear: right;
      display: block;
}

.box-block fieldset input{    
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

input.text{
    width: 100% !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border : solid #eee 1px;
    background-color: #fbfbfb;
    line-height: 32px;
   display: inline;
    height: 32px;
    padding: 0px 0 0 5px;

}

UPDATE

我發現問題是因為輸入寬度為100％..我正在尋找如何解決它。

Answer 1

當顯示器設置為“內聯塊”時，IE6和IE7不能很好地播放;

嘗試將以下內容添加到標簽的CSS規則中：

fieldset label{
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
}

我可能會有IE瀏覽器的條件表（通常我如何處理這個問題）。 這是一個以比以往更好的細節解決問題的網站： http ：//blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 2

可能你必須在你的標簽和輸入中寫下vertical-align:top 。 像這樣寫：

label, input{
 vertical-align:top;
}

Answer 3

一個可行的解決方案（它適用於我）是在輸入（文本框） ...或固定寬度為ie7或降低ie7支持時應用負邊距 。

我有同樣的問題，我討厭為邊境等額外的div！

所以這是我的解決方案似乎工作！

你應該使用ie7唯一的樣式表來避免starhacks。

input.text{
    background-color: #fbfbfb;
    border : solid #eee 1px;
    width: 100%;
    -box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;

    *line-height:32px;
    *margin-left:-3px;
    *margin-right:-4px;
    display: inline;   
    padding: 0px 0 0 5px;

}