html - CSSで入力と画像を移動しますか?

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 では事実上まったく変更されません。