Question

我有一个类型为file的输入字段：

<input class="textbox" type="file" tabindex="1" value="" size="40" name="file">

如果您想知道，textbox类只是：

background: rgba(15, 15, 15, 0.95) none repeat scroll 0 0 !important;

每当我浏览并选择一个文件时，我的文件输入将重新调整自身的大小，并使表格重新调整大小超出其限制，超过另一个表格。

如何限制文件类型的输入，以便它不会重新调整我的表格大小？

当在最右侧没有使用输入时，您可以看到两个表之间的空间大约为10个像素......

现在当它破碎时，你可以看到它与另一个表重叠，上面显示的空间消失了。

使用max-width仍然会破坏表格，但保持输入受控：

我尝试使用max-width来解决它，但它不起作用，每当我选择一个文件时它就会溢出。

问题出在Firefox上，不确定其他浏览器是否具有相同的效果。

Answer 1

有关

<input class="textbox" type="file" tabindex="1" value="" size="40" name="file">

你需要在你的CSS中：

.textbox{
    max-width: 100%;
    background: rgba(15, 15, 15, 0.95) none repeat scroll 0 0 !important;
}

Google Chrome已经截断了溢出的文字。对于长文件名，Firefox max-width: 100%;需要input[type=file]

firefox上的宽度最大宽度：

在firefox上没有max-width：

Answer 2

以下css修复了它，并没有引起其他浏览器的任何问题：

table-layout: fixed;