Question

我在IE或Chrome中看到该页面没有任何问题，而且上传按钮同时适用于..但在FireFox中，它不会正确地移动宽度，也不会上传按钮。

我似乎无法找到代码中的任何错误......这是整个页面

<!DOCTYPE html>
<html>
<head>
<style>
*{
margin:0;
padding:0;
font-family:verdana;
color:#3f3f3f;
font-size:14px;
}
html,body{
height:100%;
}
#container{
width:1024px;
margin:0 auto;
height:100%;
}
#content{
min-height:100%;
background-color:#fff;
width:804px;
padding:5px;
float:left;
display:inline;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right:10px;
}
body{
background-color:rgb(228, 228, 228);
}
table{
width:450px;
margin:0 auto;
}
table td{
padding:10px 5px;
}
table th{
background-color:rgb(116, 116, 116);
color:#fff;
padding:10px;
text-align:left;
font-weight:normal;
font-size:16px;
}
table label{
display:block;
padding-bottom:3px;
font-weight:bold;
}
table input[type=text], table select{
display:block;
color:rgb(116, 116, 116);
padding:8px;
line-height:20px;
border:1px solid rgb(183, 187, 202);
font-weight:bold;
vertical-align: middle;
background-color:rgb(255, 255, 255);
width:260px;
}
table select{
width:277px;
}
#txtEmail, #ctitle, #txtDesc{
width:550px;
}

/* Upload Button */
table input[type=file]{
text-align: right;
/* start of transparency styles */
opacity:0;
-moz-opacity:0;
filter:alpha(opacity:0);
/* end of transparency styles */
z-index:2;
cursor:pointer;
}
#fileName{
width:196px;
display:inline;
margin:0;
}
.uploadbtn{
display:block;
padding:0;
margin:0;
font-weight:normal;
width:60px;
display:inline-block;
height:38px;
line-height:38px;
vertical-align:middle;
background-color:#3f3f3f;
color:#fff;
text-align:center;
float:right;
cursor:pointer;
}
/*********************/
</style>
</head>
<body>
<div id="container">
<div id="content">
<table cellpadding="0" cellspacing="0">
<tr><th colspan="2">Informacion de Contacto</th></tr>
<tr>
    <td>
        <label>Nombre</label><input type="text" maxlength="20" id="txtName" name="txtName"/>
    </td>
    <td>
        <label>Apellido</label><input type="text" maxlength="20" id="txtLastName" name="txtLastName"/>
    </td>
</tr>
<tr>
    <td>
        <label>Telefono</label><input type="text" maxlength="13" id="txtTel1" name="txtTel1"/>
    </td>
    <td>
        <label>Telefono Adicional</label><input type="text" maxlength="13" id="txtTel2" name="txtTel2"/>
    </td>
</tr>
<tr>
    <td colspan="2">
        <label>Email</label><input type="text" maxlength="100" id="txtEmail" name="txtEmail"/>
    </td>
</tr>
<tr><th colspan="2">Informacion del Clasificado</th></tr>
<tr>
    <td colspan="2">
        <label>Titulo</label><input type="text" maxlength="100" id="ctitle" name="ctitle"/>
    </td>
</tr>
<tr>
    <td colspan="2">
        <label>Descripcion</label><textarea name="cbody" cols="78" rows="10" id="cbody" ></textarea>
    </td>
</tr>
<tr>
    <td>
        <label>Precio</label><input type="text" maxlength="9" id="txtPrecio" name="txtPrecio"/>
    </td>
    <td>
        <label>Comentario (OMO,FIJO,etc)</label><input type="text" maxlength="10" id="txtPriceComment" name="txtPriceComment"/>
    </td>
</tr>
<tr>
    <td>
        <label>Tipo de Clasificado</label>
        <select>
            <option>Venta</option>
            <option>Adopcion</option>
        </select>
    </td>
    <td>
        <label>Categoria</label>
        <select>
            <option>Perros</option>
            <option>Gatos</option>
        </select>
    </td>
</tr>
<tr>
    <td>
        <label>Pueblo</label>
        <select>
            <option>Area Metro</option>
            <option>Bayamon</option>
        </select>
    </td>
    <td>
        <label>Foto</label>
        <input type="text" maxlength="100" id="fileName" name="fileName"/>
        <label class="uploadbtn">Upload
            <input type="file" name="userfile" size="20" onchange="javascript: document.getElementById('fileName').value = this.value"/>
        </label>
    </td>
</tr>
</table>
</div>
</div>
</body>
</html>

Answer 1

正在发生的事情是每个浏览器以不同方式呈现输入文件元素，而Firefox正在将您的输入文件从标签中移除。因此，当您点击标签时，您没有点击输入文件。我清楚了吗？

请参阅本教程，了解如何创建自定义输入文件跨浏览器兼容。

http://www.quirksmode.org/dom/inputfile.html

如果这有助于你，请告诉我

Answer 2

你不应该忘记样式表上的mime类型

<style></style>

到

<style type="text/css"></style>

为什么Firefox不能正确显示/使用给定的CSS？

2 个答案: