Drupal在Firefox中查看带网格选项的问题

Question

我最近为一组图像（可点击缩略图）从一组文件创建了一个drupal视图。这是一个'视图'格式：带3列的网格。我装在文件：路径，标题，&标题和完成由“重写结果”的观点来自：使用下面的“文件标题”：

<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> 

我也注意到，当我指定“文本修饰：无”，同时由铬&火狐忽略。是不是内联应该推翻？任何建议将不胜感激。我没有完整的drupal权限，所以我不允许添加类或访问管理员drupal区域，所以我很想找到一种方法来告诉所有浏览器在我的图像上使用相同的宽度。

Answer 1

好吧，所以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。感谢您的讨论。

Answer 2

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