css - Firefox 中带有网格选项问题的 Drupal View

Question

我最近从一组文件中为图片库(可点击的缩略图)创建了一个 drupal View 。这是一个“ View ”格式:具有 3 列的网格。我加载了文件:路径、标题和标题，并使用以下命令从“文件:标题”中“重写结果”完成了 View :

<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 忽略了我输入的所有内容。它显示标题，一个大到超出窗口和标题的图像，根本没有调整大小。我最近的尝试是使用 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 标记，我不确定除非您将其包装在表格中，否则 TD 是否会起作用。此外，如果您可以编辑一些 CSS，请尝试避免使用网格并改用无序列表和 display:inline-block;在 LI 元素上，或者 flexbox 更好这将允许您将没有所有 HTML 的所有字段打印到单个字段的重写函数中。这将使代码更简洁、响应更快。