Firefox中“max-width:100%”不兼容问题

这个博客是基于“Pelican + Markdown + 定制的my-gum主题”的。定制的主题将博文正文页面的 右边栏去掉,这导致在Firefox等浏览器中,正文中大的图片会突破正文块的宽度,高度也得不到限制,显示效果非常差。

其原因是:Markdown的图片区块元素![Alt text](/path/to/img.jpg)渲染成HTML元素的结果为 -

<p>
    <img src="/path/to/img.jpg" alt="Alt text"></img>
</p>

<p>元素内的元素是行内(inline)元素。主题my-gum使用的CSS框架gumby对img元素是使用max-width: 100%将图片的最大宽度限制为父元素的宽度。但在Firefox中max-width对于行内元素并不会生效(all elements but non-replaced inline elements, table rows, and row groups),所以造成了显示问题。

网络上有人说可以用width: 100%替代之,但width: 100%max-width: 100%的区别是:width: 100%是将所有指定元素的宽度 拉伸或收缩到和父元素的宽度一致,而max-width: 100%则是如果指定元素的宽度不超过父元素的宽度,则大小不变,如果超过了父元素的宽度,则将宽度收缩为父元素的宽度。如果使用width: 100%,那么我博文中的图片,即使再小,都会被拉伸为正文的宽度,自然是不会好看的。

我的想法是:既然使用CSS不能解决这个问题,那就尝试使用Javascript。当图片加载完毕后,将图片宽度与正文宽度做比较,如果 图片宽度大于正文宽度,则为该图片设置width: 100%。唯一不完美的地方是某些大图片加载完毕之前的宽度很大,比较难看。

代码如下所示:

$(function() {
    var entryContentWidth = $('.row').width();

    $('.entry-content img').on('load', function(){
        if($(this).width() > entryContentWidth) {
            $(this).width('100%');
        }
    });
});

参考资料

Comments