余白を残して浮動小数点数を使用したie7バグ

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

はあなたラベル & 入力にvertical-align:topを記述する必要があることに。このように書く：

label, input{ 
vertical-align:top; 
} 

Answer 2

IE6とIE7の表示が「インラインブロック」に設定されている場合は素晴らしいプレーしていません。あなたのラベルのCSSルールに以下を追加

試してみてください。

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

私はおそらく（私はこの問題に対処通常、どのように）IEブラウザのための条件付きシートを持っているでしょう。ここで私が今までできたよりも良い内容に問題がexlainsサイトです。（それは私のために動作します）働くかもしれhttp://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 3

一つの解決策は、入力（テキストボックス） ...またはのために一定の幅で負のマージンを適用することですie7、またはie7サポートを落とす。

私は同じ問題を抱えていました。私は国境などの余分なdivを持つことを嫌っていました！

だから私の解決策は動作するようです！

starhacksを避けるには、ie7スタイルシートのみを使用してください。

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; 

}