Question

我有以下HTML代码：

<form id="update_status_imgform" method="post" enctype="multipart/form-data" action="ajaximage/update_status_image.php">
<div class="file_button_container2" id="btn_contaier_browse"><input type='file' name='upd_img' id='upd_img' /></div>
</form>

这是CSS：

.file_button_container2,
  .file_button_container2 input {
       height: 24px;
       width: 30px;
       cursor: pointer;
   }

   .file_button_container2 {
       background-image: url(../images/assets/camera.png);
       z-index: 1;
       position: relative;
       top: 0px;
       left: 0px;
       opacity:0.4; 
       filter:alpha(opacity=40);
   }

   .file_button_container2 input {
       -moz-opacity:0 ;
        filter:alpha(opacity: 0);
        opacity: 0;
        z-index: 2;
        position: relative;
        text-align: right;
   }

现在，这对于IE来说很好，并且效果很好，但对于Safari和Chrome，它似乎会执行以下操作：

A）在另一个图像前面向左移动（宽度为100px） B）点击时不打开文件浏览器选择照片

如何解决此问题，使其向右移动110像素，并在Chrome和Safari中打开文件上传选择框，同时在IE中根本不会改变。

Answer 1

我通过执行以下操作解决了这个问题：

<!--[if !IE]><!-->
<style type="text/css">
.file_button_container2,
  .file_button_container2 input {
       text-align: left;
       padding-left: 110px;
   }

   .file_button_container2 {
       background-position: right;
       background-repeat: no-repeat;
   }
</style>
<!--<![endif]-->

在CSS中移动输入和图像？

1 个答案: