Html css IE7 内联块

Question

I have a problem with a simple form, in IE7.

In FF, and other browsers, I have no problem.

<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>

My CSS styling:

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;
}

Notice the fix I have tried

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

I got that from http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html

In Firefox it display, like this:

And IE7:

Answer 1

I usually load different.CSS files for Inte.net Explorer, it keep my code clean:

<!--[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

Could this be a case of IE's funky way of dealing with padding? Is your fieldset fit tightly around those text boxes?

http://en.wikipedia.org/wiki/Inte.net_Explorer_box_model_bug

Answer 3

See this alot in IE, its an issue with how IE formats what the code tells it to do

Your best bet is use to use JS to identify what browser is being run then build a custom style sheet for IE. Here are some links to help out

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

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

Best of luck to you:)

Answer 4

I would give the div.field overflow:hidden and then float:left; both the label and input, make sure when using margins for float elements you give them a display:inline;

No hack required and works for all browsers, you can set a height and line-height for both the label and input.