0

我在 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：

在此处输入图像描述

4

4 回答 4

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]-->
于 2012-04-10T12:47:41.130 回答
1

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

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

于 2012-04-10T12:47:50.033 回答
0

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

最好的办法是使用 JS 来识别正在运行的浏览器，然后为 IE 构建自定义样式表。这里有一些链接可以帮助你

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

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

祝你好运:)

于 2012-04-10T12:48:22.630 回答
0

我会给 div.field overflow:hidden 然后 float:left; 标签和输入，确保在使用浮动元素的边距时给它们一个 display:inline;

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

于 2012-04-10T12:52:16.547 回答