Drupal View with Grid Option in Firefox 中的 Grid 选项问题

Question

我最近从一组文件中为图像库（可点击的缩略图）创建了一个drupal视图。这是一个"视图"格式：网格，有 3 列。我加载了File：Path，Caption和Title，并通过使用以下方法从"File：Title"重写结果"来完成视图：

<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 忽略了我输入的所有内容。它显示标题，一个如此大的图像，以至于离开窗口和标题，根本没有调整大小。我最近的尝试是使用边框框，但没有运气，以下显示没有变化。

<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 标签，我不确定除非您将其包装在表中，否则 TD 是否可以工作。另外，如果您可以编辑一些 CSS，请尝试避免使用网格并使用无序列表并显示：内联块;在 LI 元件上，或者弹性框甚至更好这将允许您将所有字段打印到单个字段的重写功能中，而无需所有 HTML。这将使代码更快，响应更快。

Answer 2

好的，所以Firefox是问题所在。所有样式宽度命令都将被直接忽略。执行此操作并使用视图格式：网格的方法是使用以下方法重写输出：

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

然后你必须把类 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。感谢您的讨论。