Html css IE7内联块

Question

我在IE7中遇到了一个简单形式的问题。

在FF和其他浏览器中，我没有问题。

<form class="hotline_form">
     <fieldset>
         <legend>TEST</legend>
         <div class="field">
             <label class="question">Name:</label><input name="name"  type="text">
         </div>
         <div class="field">
             <label class="question">Username:</label><input name="name"  type="text">
         </div>
     </fieldset>
</form>

我的CSS样式：

form.hotline_form{
    margin:0; padding: 0;
}
form.hotline_form fieldset{
    border: 0;
    padding: 0;
    margin: 25px 0 0 0;
}
form.hotline_form fieldset legend{
    width: 100%;
    padding: 0px 0px 5px 0px;
    margin: 5px 0px 5px 0px;
    border-bottom: 1px solid #999;
}
form.hotline_form fieldset div.field label{
    display: inline-block; 
    width: 130px; 
    padding: 0pt 20px 0pt 0pt;
    margin-top:5px;
    vertical-align: top;
    zoom:1; *display: inline; _height: 15px; /* IE7 fix*/
}
form.hotline_form fieldset div.field input, form.hotline_form fieldset div.field select, form.hotline_form fieldset div.field textarea{
    width: 330px;
    margin: 5px 0px 0px 0px;
    padding: 1px 0px 1px 0px;
}
form.hotline_form div.submit{
margin: 40px 0 0;
padding: 0 0 5px;
width: 100%;
}
form.hotline_form div.submit input{
    float: right;
    padding: 0px 7px 0px 0px;
}

注意我尝试的修复

zoom:1; *display: inline; _height: 15px; /* IE7 fix*/

我从http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html

那里得到了

在Firefox中显示，如下所示：

和IE7：

Answer 1

我通常为Internet Explorer加载不同的.CSS文件，它保持我的代码清洁：

<!--[if IE 7]> <link href="ie7.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if IE 8]> <link href="ie8.css" rel="stylesheet" type="text/css"> <![endif]-->

Answer 2

这可能是IE处理填充的时髦方式吗？你的字段集是否紧紧围绕这些文本框？

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Answer 3

在IE中看到这个很多，它是IE如何格式化代码告诉它的问题

您最好的选择是使用JS来识别正在运行的浏览器，然后为IE构建自定义样式表。以下是一些帮助

的链接

http://javascript.about.com/library/blbrsdet.htm

http://www.w3schools.com/js/js_browser.asp

祝你好运：）

Answer 4

我会给div.field溢出：隐藏然后浮动：左;标签和输入，确保当使用浮动元素的边距时，你给它们一个显示：内联;

不需要hack并适用于所有浏览器，您可以为标签和输入设置高度和行高。