这个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%..我正在寻找如何修复它。
答案 0 :(得分:2)
尝试将以下内容添加到标签的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/
答案 1 :(得分:0)
您可能需要在标签&中写下vertical-align:top
。 输入。写得像这样:
label, input{
vertical-align:top;
}
答案 2 :(得分:0)
一个可行的解决方案(对我有用)是在输入(文本框) ...或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;
}