0

以下代码是我编写的表单的“工具栏”。一切正常，但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{}
4

0 回答 0