CSS表单ie7错误，左边距和浮动答案

【问题标题】：CSS form ie7 bug with margin left and floatCSS表单ie7错误，左边距和浮动
【发布时间】：2013-03-02 06:01:09
【问题描述】：

这个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;

}

更新

我发现问题是因为输入宽度 100%.. 我正在寻找解决方法。

【问题讨论】：

标签： html css internet-explorer internet-explorer-7

【解决方案1】：

当显示设置为“inline-block”时，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/

【讨论】：

标签和输入默认都是内联元素。所以，不需要在上面定义内联
如果他希望他的标签具有特定的宽度，他需要将其设置为内联块，我怀疑这就是让他的表单看起来不稳定的原因。 display:inline 用于 IE（如果我没记错的话）， zoom:1 将触发 hasLayout 然后使其工作。
是的，您是对的，但请查看屏幕截图标签和输入并排显示。可能主要原因是内联默认值是基线。因此，有时当 inline-block / inline 之间存在高度差异时，我们需要定义 vertical-align:top;
我提到的伙计们，我认为问题在于宽度 100%，因为 ie7 有问题 box-sizing 不支持

【解决方案2】：

可能你必须在 label 和 input 中写上vertical-align:top。像这样写：

label, input{
 vertical-align:top;
}

【讨论】：

【解决方案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;

}

【讨论】：