CSS窗体ie7有余裕和浮动的bug

这个CSS代码有ie7的麻烦。在ie6是绝对混乱。
问题是，输入文本框获取波纹管标签。 enter image description here 只有解决办法是浮动的div离开，但有问题，然后用定型..CSS窗体ie7有余裕和浮动的bug

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％..我寻找如何解决它。

来源

2012-03-23 GorillaApe

可能是你在你的标签 & 输入写vertical-align:top。如下所示：

label, input{ 
vertical-align:top; 
}

来源

2012-03-23 14:37:47 sandeep

当显示器设置为“inline-block”时，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/可能工作（我的作品）

来源

2012-03-23 14:39:19 Gazillion

标签和输入都是默认的内联元素。所以，不需要在其上定义内联 – sandeep 2012-03-23 14:43:51

如果他希望自己的标签具有特定的宽度，他将需要将其设置为内联块，我怀疑这使得他的外观看起来很乱。显示：内联是IE浏览器（如果我没有弄错），缩放：1将触发hasLayout，然后使其工作。 – Gazillion 2012-03-23 14:49:47

是的，你是对的，但看到屏幕截图标签和输入并排。可能的主要原因是内联默认值是basline。所以，有时当inline-block/inline之间有高度差时，我们需要定义vertical-align：top; – sandeep 2012-03-23 14:59:21

一种解决方案是在输入申请缘阴性（文本） ...或固定宽度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; 

}

来源

2012-03-24 21:00:01 GorillaApe

CSS窗体ie7有余裕和浮动的bug

回答

相关问题