如何找到与替代文本和盒子模型相关的另一种 Safari 解决方法?

Question

由于一些当之无愧的反对票，这个问题已经进行了认真的修改。(:)吸取的教训(

场景：我在CMS上工作，用户可以在其中添加宽度和高度或alt等style到img标签。我们通常将img标签放在figure中的picture标签中，但即使这样也不能保证。我们通过以可能的大小数组存储这些图像来优化这些图像。因此，在我们对img进行计算以确定要在该src属性中加载哪个图像之前，src是未知的。

<picture>
<img src='' alt='a long alt text' class='imageWithAlt'>
</picture>

在 Safari 中，宽度的console.log约为 92。

问题：在我们这边，92可以是用户决定应用的替代文本或'style=width: 92px'。

黑客：为了更好地了解宽度，我们会去掉alt

$element.attr('alt', '').css({ margin: 0, padding: 0 }); 

然后$element.width();将给出没有替代文本的宽度。如果这个数量小于我们的魔术40px，那么我们会寻求填充父容器。至少我们曾经使用过这个 Hack，直到我不知道 Safari 现在什么时候只是让它成为alt周围的盒子模型，并不关心它后来是否被删除。因此，现在此示例将跳过我们对父容器的检查，并呈现比用户预期的更小的图像版本。

问：Safari 中还有其他任何人都可以想到的解决方法吗？

示例 HTML：

<figure>
<picture>
<img src='' alt='a long alt text' class='imageWithAlt'>
</picture>
<picture>
<img src='' alt=''  class='imageWithNoAlt'>
</picture>
</figure>

示例 JavaScript：

let imgWithAlt = $('img')[0],
imgWithNoAlt = $('img')[1];
console.log('imgWithAlt width: ', imgWithAlt.width);
console.log('imgWithNoAlt width: ', imgWithNoAlt.width);
// previous solution to get width or height without alt text
imgWithAlt.removeAttribute('alt');
console.log('imgWithAlt width after removing alt: ', 
imgWithAlt.width);

示例 CSS：

img {
background: #eee;
}
figure {
width: 480px;
height: 270px;
}

这是指向jsfiddle的链接，如果您在Safari中使用，则会看到差异，并且在Chrome中，我们有办法保留当前显示的16X16图标，因此我们的Hack将在Chrome中工作

Answer 1

Alt 包含 W x H 作为文本

<img src="img/hero.jpg" id="image" alt="">
<script>
var img, width, height;
img = document.getElementById("image");
width  = img.width;
height = img.height;
img.alt = width + ' x ' + height;
</script>