0

我有以下 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）在另一个图像前面向左移动（宽度为 100 像素） B）单击时不打开文件浏览器来选择照片

我该如何解决这个问题，使它向右移动 110 像素，并在 Chrome 和 Safari 中打开一个文件上传选择框，同时在 IE 中根本没有改变。

4

1 回答 1

0

我通过执行以下操作解决了它：

<!--[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]-->
于 2013-05-12T14:43:46.660 回答