更改 chrome 和 firefox 的 file_field_tag 文本字段大小答案

【问题标题】：Changing the file_field_tag textfield size for chrome & firefox更改 chrome 和 firefox 的 file_field_tag 文本字段大小
【发布时间】：2010-11-05 09:42:32
【问题描述】：

大家好，

我在尝试更改 chrome 和 FF 上 file_field_tag 的默认文本字段时遇到问题，它在 IE 上运行良好，但在其他浏览器上却没有应用大小。

我的代码是。

file_field_tag "#{ compliance.id }_document" , :size => '2

不知道我是否做错了什么，但我确信这是我错过的一件非常小的事情。

提前致谢

【问题讨论】：

你确定这个尺寸在 HTML 中适用于这个尺寸吗？这可能不是轨道问题。但是 HTML 兼容性 :(

标签： html ruby-on-rails css ruby

【解决方案1】：

HTML 4.01 规范规定，在<input type="file"> 的情况下，此属性定义以像素为单位的宽度，而不是以字符为单位。

http://www.w3.org/TR/html4/interact/forms.html#h-17.4

除此之外，您应该使用 CSS 来定义宽度。您有两个选择：使用内联样式：

file_field_tag "#{compliance.id}_document", :style="width: 2em"

或（最好）在标签中添加一个类，并将 CSS 定义放在您的样式表中：

file_field_tag "#{compliance.id}_document", :class="short"

/* CSS */
input.short {
  width: 2em;
}
/* ..or if you expect some intelligent browsers, you may be more specific: */
input[type='file'].short {
  width: 2em;
}

您可能需要进行一些试验，因为文件控件可能会拒绝接受您的宽度。每个浏览器的默认样式表规则可能会定义一些其他规则，比你的规则更强大。

对于 Firefox，您可能会在文件 forms.css 中看到定义。在我的系统上，位置是/usr/lib64/xulrunner-1.9.2/res/forms.css。

有一个定义，可能对你有所帮助：

input[type="file"] > input[type="text"] {
  ....

为input[type="file"].short > input[type="text"] 定义一个宽度，你应该没问题。但请注意，此规则可能会在每个版本的浏览器中更改。

【讨论】：

感谢 Arsen，内联样式比实际尝试在 ruby 中指定字段的大小效果更好。我使用 :style => "width" 代替。