1

原因（对不起，我罗嗦，我知道）

这可能是一个棘手或不寻常的请求，但在我管理的网站上，我有很多页面包含存储在表格中的图像。用户将图像放在那里作为标题或只是确保布局符合他们的期望。我的大多数用户都不够精通使用 DIV，所以我的表永远不会消失。

我正在努力使我的网站具有响应性，但我在使用这些图像时遇到的一个问题是，当图像在表格中并且调整视口大小时，浏览器的行为会有所不同。例如，如果图像嵌套在表格中，Firefox 将不会使用最大宽度 100% 来缩放图像。 根据这个先前的问题，这部分是因为没有关于如何处理嵌套在内联元素中的图像的规范。

我发现解决此问题的唯一方法是从 img 标签中提取图像的宽度/高度，并在我的 CSS 中将宽度设置为 100%。有了这个，Firefox 会始终按比例缩小图像，即使它们位于表格单元格中。 这是我正在尝试修复的事物类型的示例。Drupal/CKEditor 喜欢将图像的宽度放在样式标签中，我需要我的 CSS/JS 东西来修复它。

问题

我只希望我的 CSS/JS 修复适用于不支持内联元素中最大宽度的浏览器。有没有办法在 Modernizr 中对此进行测试？在我网站的 JS 的当前迭代中，我只是用 Modernizr 进行浏览器检查，以查看用户是否正在使用 firefox，然后在检测到时应用修复。对于那些好奇的人，这就是我的做法（firefox 检查的来源）。

Modernizr.addTest('firefox', function () {
 return !!navigator.userAgent.match(/firefox/i);
});

jQuery('.firefox #zone-content img').each(function(){
    jQuery(this).removeAttr('width');
    jQuery(this).css('width', '');
});

我希望有一种简单的方法来重写它，所以我不必为此使用浏览器检测，但我对modernizr addTest API 的理解是有限的。希望其他人创造了类似的东西并可以分享他们的知识。

4

0 回答 0