Firefox 中带有网格选项问题的 Drupal 视图

Question

我最近从一组文件中为图片库（可点击的缩略图）创建了一个 drupal 视图。这是一个有 3 列的 'view' Format:Grid。我加载了 File:Path、标题和标题，并使用以下方法从 "File:Title" 完成了 "Rewriting Results" 的视图：

<div style="width:200px;"><td width="200px" ><a href="[uri]" style="max-width: 200px;">[field_title]<img src="[uri]" alt="ITSO" width="200px" style="width: 200px; max-width: 200px;" />[field_caption]</a></td></div>

所以这在 Chrome 和 Safari 中运行良好，但我的失败是 Firefox。我试图用 -moz 定义宽度，但 Firefox 忽略了我输入的所有内容。它显示标题，图像太大以至于超出 window 和标题，根本没有调整大小。我最近的尝试是使用 border-box 但没有成功，下面显示没有任何变化。

<div style="width:200px; max-width: 200px; -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; -moz-box-sizing: border-box; display: inline-block; float: left;"><td width="200px" > <a href="[uri]" style="text-decoration:none; max-width: 200px;">[field_title]<img src="[uri]" alt="ITSO" width="200px" style="width: 200px; max-width: 200px;" />[field_caption]</a></td></div>

当我将其更改为 % 而不是 px 定义时，我会调整图像和列宽的 Chrome 大小，但在 Firefox 中没有变化。

<div style="width:20%; max-width: 20%; -webkit-column-width: 20%; -moz-column-width: 20%; column-width: 20%; -moz-box-sizing: 20%; display: inline-block; float: left;"><td width="20%" > <a href="[uri]" style="text-decoration:none; max-width: 20%;">[field_title]<img src="[uri]" alt="ITSO" width="20%" style="width: 20%; max-width: 20%;" />[field_caption]</a></td></div>

我还注意到，当我指定 "text-decoration:none" 时，它会被 Chrome 和 Firefox 忽略。内联不应该否决吗？任何建议将不胜感激。我没有完全的 drupal 权限，所以我不能添加类或访问管理员 drupal 区域，所以我很想找到一种方法来告诉所有浏览器在我的图像上使用相同的宽度。

Answer 1

您能否首先尝试避免使用 TD 标记，我不确定除非您将其包装在 table 中，否则 TD 是否有效。此外，如果你可以编辑一些 CSS 尝试避免使用网格并使用无序列表和 display:inline-block；在 LI 元素上，或者 flexbox 更好这将允许您将所有字段打印到没有 HTML 的所有字段到单个字段的重写函数中。这将使代码更简洁、响应更快。

Answer 2

好的，Firefox 就是问题所在。所有样式宽度命令都被直接忽略。执行此操作并使用 Views Format: Grid 的方法是将输出重写为：

<div class="craxypic"><a href="[uri]">[field_title]<img src="[uri]"  />[field_caption]</a></div>

然后你必须将 class craxypic 放入你的 css 文件中：

.craxypic {
<td width="200px" > 
width: 200px;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
-moz-box-sizing:border-box;
display: inline-block;
float: left;
text-decoration:none;
max-width: 200px;
</td>}

这是让所有浏览器都认可您的宽度命令的唯一方法。我仍在学习 drupal，此时我不得不说它让我想起了 iraf。感谢讨论。

Firefox 中带有网格选项问题的 Drupal 视图

Drupal View with Grid option problems in Firefox

css

firefox

drupal

drupal-views

drupal-7