以下代码是我编码的表单的“工具栏”。一切正常,但 IE7 没有。当鼠标输入div.btn
元素时,所有按钮都会向左移动1或2个像素,而p>input.toggle
会在最后一个按钮上移到右侧。
HTML:
<form class="form-file-upload" action="SiGA/pedido/add/" method="post" enctype="multipart/form-data">
<div class="barra-cmd clear">
<div class="btn btn-add bt-adicionar">
<label><span class="icons icon-add"></span> Ad. Imagens</label>
<input type="file" name="cmd_adicionar[]" accept="image/*" multiple="multiple" />
</div>
<div class="btn btn-send bt-enviar">
<label><span class="icons icon-up"></span> Enviar</label>
<input type="submit" name="cmd_enviar" value="Enviar" />
</div>
<div class="btn btn-cancel bt-cancelar">
<label><span class="icons icon-cancel"></span> Cancelar</label>
<input type="reset" name="cmd_cancelar" value="Cancelar" />
</div>
<div class="btn btn-del bt-limpar">
<label><span class="icons icon-clean"></span> Apagar</label>
<input type="button" name="cmd_apagar" value="Apagar" />
</div>
<p><input type="checkbox" name="cmd_apagar[]" value="" class="toggle" /></p>
<div class="btn btn-next bt-finalizar">
<label><span class="icons icon-next"></span> Finalizar pedido</label>
<input type="button" name="cmd_fechar" value="Finalizar" />
</div>
</div>
</form>
CSS:
.btn{color:#fff;padding:7.5px 0;overflow:hidden;text-align:center;margin:0 2px;border-radius:5px;border:1px solid #aaa;background-image:url('../imgs/back.png');background-repeat:repeat-x;background-position:left top;}
.btn:hover{background-position:left center;}
.btn:active{background-position:left bottom;}
.btn-add{background-color:#4cb749;}
.btn-send{background-color:#3F8DCA;}
.btn-cancel{background-color:#fcd209;}
.btn-del{background-color:#df2227;}
.btn-next{background-color:#910B0E;}
.form-file-upload{display:block;}
.form-file-upload .barra-cmd>div{float:left;width:150px;}
.form-file-upload .barra-cmd label{z-index:1;color:#fff;text-shadow:0 0 15px #000;}
.form-file-upload .barra-cmd div input{z-index:3;cursor:pointer;border-width:0 0 100px 200px;border-style:solid;border-color:transparent;position:absolute;top:0;right:0;margin:0;opacity:0;filter:alpha(opacity=0);}
.form-file-upload .barra-cmd>p{margin:5px 0 0 -20px;z-index:4;position:relative;display:block;float:left;}
.form-file-upload .barra-cmd .toggle{}