javascript 中的输入字段样式属性在 chrome 中工作正常，在 Firefox 中不起作用

Question

在我的文件上传页面字段中，我在javascript中设置了属性样式，如下所示

choicefile.setAttribute("style", "width: 86px;
                                  position: absolute;
                                  margin-left: 83px;  //This pixels shows the upload field in a correct place
                                  margin-top: 90px;  // This pixels shows the upload field in a correct place
                                  z-index: 1;
                                  opacity: 0;");

但是在Firefox中，它显示在错误的位置上传文件。在火狐中，如果我们将这两个属性更改为

choicefile.setAttribute("style", "width: 86px;
                                  position: absolute;
                                  margin-left: 35px;  //In Firefox it is the correct pixels
                                  margin-top: 150px;  //In Firefox it is the correct pixels
                                  z-index: 1;
                                  opacity: 0;");       

我该如何解决这个问题。任何人都可以帮助解决这个问题。提前致谢

我的网址是

http：//mytest.php？id=2&mview=69

单击addnewentry后，文件上传器显示在正确的位置，但在Firefox中，它显示在错误的位置。

<form name="choiceadd" action="" method="post" enctype="multipart/form-data" onsubmit="return validationaddchoice();">
<span id="addnewcontain">
</span>
<input type="hidden" name="choicecount" value="0" />
<div class="four" style='margin-top:40px;'>
<input type="button" value="Add New Entry" onclick="addnewchoice(document.forms['choiceadd']['choicecount'].value)" >
</div>
<div class="five">
<input type="submit" name="choiceaddsubmit" class="choiceaddsubmit" />
</div>
</form>

以上是主页中的表单。单击此按钮时，将调用函数 addchoice，它包括上面提到的 choicefile 属性样式

函数是

function addnewchoice(val)
{choicefile.setAttribute("style", "width: 86px; position: absolute; margin-left: 83px; margin-top: 90px; z-index: 1; opacity: 0;");
}

Answer 1

与其像这样设置样式，不如像下面这样设置，以实现完全跨浏览器的兼容性。分配每个样式属性，如下所示

而不是设置样式

function addnewchoice(val)
{   
   choicefile.setAttribute("style", "width: 86px; position: absolute; margin-left: 83px; margin-top: 90px; z-index: 1; opacity: 0;");
}

您可以这样设置它以实现跨浏览器兼容性

function addnewchoice(val)
    choicefile.style.width="86px";
    choicefile.style.position="absolute";
    ... so on..
}

Answer 2

这个问题的完美答案是

<style>
   @-moz-document url-prefix() {
                       .testview{
                      width: 86px;
                      position: absolute;
                      margin-left: 35px;
                      margin-top: 90px;
                      z-index: 1;
                      opacity: 0;
                    }
                 }
</style>

如果浏览器是 Mozilla Firefox，则上述具有相应属性的样式将应用于页面。如果浏览器是 chrome，则表示将应用默认样式