Question

我最近从一组文件中为图片库（可点击的缩略图）创建了一个drupal视图。这是一个'视图'格式：网格有3列。我加载了文件：路径，标题和＆amp;使用以下内容标题并通过“文件：标题”中的“重写结果”完成视图：

<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和＆amp; Firefox浏览器。是不是内联应该推翻？任何建议将不胜感激。我没有完整的drupal权限，所以我不允许添加类或访问管理员drupal区域，所以我很想找到一种方法告诉所有浏览器在我的图像上使用相同的宽度。

Answer 1

你可以尝试避免首先使用TD标签，我不确定除非你把它包装在一个表格中，否则TD会起作用。此外，如果您可以编辑一些CSS尝试并避免使用网格并使用无序列表而显示：inline-block;在LI元素上，或者flexbox甚至更好这将允许您将没有所有HTML的所有字段打印到单个字段的重写功能中。它可以使代码更快，响应更快。

Answer 2

好的，所以Firefox就是问题所在。所有样式宽度命令都被直接忽略。这样做的方法＆amp;使用视图格式：网格是用以下内容重写输出：

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

然后你必须在你的css文件中输入class craxypic：

.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视图

2 个答案: