2 yljmonkey yljmonkey 于 2015.05.27 00:00 提问

css页面布局vertical-align:middle;和float:
<div class="row">
                    <div class="cell regist regist_show">
                        <b:message key="validatecode" />
                    </div>
                    <div class="cell regist" style="float:left;">
                    <!-- 上面这个float:left不加的话,在IE8里,下面的输入框和文本框不在一行,加上以后,IE8里的img没有垂直居中,FF,谷歌,360里都是输入框没有垂直居中,请问,有什么好的解决办法? -->
                        <diy:text property="validatecode" autocomplete="off" style="width:60px;"/>
                    </div>
                    <div class="cell regist">
                        <img src="getvcode.do" onclick="refresh(this)" style="margin-left:10px"/>
                    </div>
                </div>
                <div class="row">
                    <div class="cell regist" style="width:960px;text-align:center">
                        <h:submit>
                            <b:message key="operation.regist"/>
                        </h:submit>
                    </div>
                </div>

.regist_show {
text-align:right;
float:left;
width:480px;
}
.regist {
height:40px;
display:inline block;
line-height:40px;
align:center;
vertical-align:middle;
}
.row {
display:table-row inline;
}
.cell {
position:relative;
height:20px;
line-height:20px;
display:table-cell;
overflow:hidden;
}

360,FF效果
图片说明
IE8效果
图片说明

修改后IE8
图片说明

2个回答

danielinbiti
danielinbiti   Ds   Rxr 2015.05.27 01:22
已采纳

float和display:table系列是不对的,两个冲突,
改成下面样式,去掉了float:left,去掉了块状

 .regist_show {
text-align:right;
width:480px;
}
.regist {
height:40px;
line-height:40px;
align:center;
vertical-align:middle;
}
img{  /*图片居中*/
vertical-align:middle;
}
.row {
display:table-row ;
}
.cell {
height:20px;
line-height:20px;
display:table-cell;
overflow:hidden;
}
yljmonkey
yljmonkey 受教,谢谢.
2 年多之前 回复
danielinbiti
danielinbiti 回复羞愧: 和兼容模式有关,ie兼容模式不支持table-row,table-cell
2 年多之前 回复
yljmonkey
yljmonkey 我还是用table来做好了.谢谢了.
2 年多之前 回复
yljmonkey
yljmonkey 这个跟我用兼容模式有关么?取消兼容模式的话,360和IE8效果一样了.
2 年多之前 回复
yljmonkey
yljmonkey 图在上面.
2 年多之前 回复
danielinbiti
danielinbiti 回复羞愧: ?什么情况
2 年多之前 回复
yljmonkey
yljmonkey 改完后,IE8 input 都另起一行打头输出了.
2 年多之前 回复
xiaobin_xu
xiaobin_xu   2015.05.27 08:38

这是你布局的问题 可能IE和火狐之间有些不兼容 建议在布局长和宽时 用百分比去控制最好

yljmonkey
yljmonkey 谢谢提醒.
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!