Firefox中markdown的img max-width:100%不兼容问题

其实我的第一反应是改写markdown的解析器，至少我处理link的_blank的时候就是这么干的，而且这样我觉得比较优雅，在网页上装满javascript总觉得不太爽

不过没搞定，应该是firefox对inline的判定太恶心了，我嵌套的table太多了

事实上这个博客已经说得非常透彻了，让我这种前端一知半解的人很愉悦： Firefox中“max-width:100%”不兼容问题

代码在我的blog上大概是这样的

$(function() {
    var entryContentWidth = $('.blog_content_index').width();
    $('.blog_content img').on('load', function(){
        if($(this).width() > entryContentWidth) {
            $(this).width('100%');
        }
    });
});

不过我碰了个很撕笔的问题，去stackoverflow上滚了一圈:Uncaught ReferenceError: $ is not defined

顿时觉得像我那么撕笔的人原来还不是一个，大眼不识jquery啊……

不过具体弄起来有个问题，图片如果有了缓存，就不会load了。如果是以前访问过的页面照样会出现撑大的情况

为此我还写了个非jquary的js企图弄掉这个情况

function checkImgWidth(strClass,stdClass, strWidth) {
    var classStd = document.getElementsByClassName(stdClass);
    if (classStd.length>0) {
        var stdLength = classStd[0].clientWidth;
        var classElements = document.getElementsByClassName(strClass);
        for (var i = 0 ; i < classElements.length ; i++) {
            var imgs=classElements[i].getElementsByTagName("img");
            for (var j=0;j<imgs.length;j++) {
                if (imgs[j].clientWidth > stdLength) {
                    imgs[j].style.width=strWidth;
                }
            }
        }
    }
}

结果发现stdLength取出来的时候已经被撑大了。。。

最后借鉴了这个：CSS 防止表格被內容撐開，发现外层框架加上:

table-layout: fixed;

一切都解决了……

Firefox中markdown的img max-width:100%不兼容问题

评论失败