@ZEAL Blog·厉
WWW Zeal Blog
We stand alone,
TOGETHER.

Firefox下大内容页面变空白问题

Posted by zeal on 2009-08-26 12:30 , 2596 characters |  + 0 - 0   English
转载请保留本行原始出处声明信息 : http://www.zeali.net/entry/630 MaDe1nZEAL
标签 ( 网络 ):  ,  ,  , 

Firefox 下访问某些内容屏数很多的页面时(尤其是基于 Discuz 的论坛帖子),会出现内容显示到一定的高度之后,剩下的都变成空白一片。一度怀疑是 Firefox 的某种内存管理机制限制了单个页面加载内容的K数,当时的解决方法是对于这些论坛站用 IETab 切换到IE模式下访问。

后来发现在用 Google Reader 阅读某些 feeds 内容时也会出现这种情况,当某个 feed 日志内容太长(通常是贴了上百张图片的日志)时,图片显示到一定的张数之后就变成空白一片了。

让我在 IE 模式下用 GReader 肯定是不现实的,所以拼命研究了一把(其实也就是Google了一把)。得出的结论是 Firefox 在处理包含在 table , td 中的 超高 div 的时候会有些问题,需要显示指定这些 div 的 css 样式: overflow: visible !important

既然 Firefox 是可以加载自定义样式的可扩展浏览器,对这些导致大片白屏的 div 进行样式重载也就不是什么难事儿了。当然首先要安装 Stylish 扩展。

用 stylish 创建一个新的空白样式,样式内容如下:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document 
domain("dvdspring.com"),
domain("1000fr.com") {
    div[class="postmessage defaultpost"]{
        overflow: visible! important;
    }
    table[class="t_table"]{
        width: 100% !important;
    }
}

因为本人常去的论坛不多,所以使用 domain() 来限定该样式的作用域。请根据个人的上网习惯修改站点的domain,或者可以直接写成

@-moz-document url-prefix(http)

使该样式应用于所有的 http(s) 页面,不过个人建议还是指定作用域比较好。@-moz-document 可用的域名过滤包括 domain , url-prefix , url (可惜不支持正则的)。

对于 Google Reader 的内容显示缺失,另外建一个空白样式:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document 
url-prefix(http://www.google.com/reader), 
url-prefix(https://www.google.com/reader), 
url-prefix(http://google.com/reader), 
url-prefix(https://google.com/reader) {
    /* Show large contents correctedly, 
       especially for large quantity of pictures. */
    #current-entry.entry, 
    #current-entry .entry-container, 
    #current-entry .entry-main , 
    #current-entry .entry-body , 
    #current-entry .item-body 
    {overflow:visible!important; height: auto !important; }

    #entries .collapsed .entry-title {
        font-weight:normal !important; 
        color: #200 !important;
    }
    #entries .read .collapsed *{
        font-weight:normal; 
        color: #ccc !important;
    }
    #current-entry .collapsed {
        height: 3ex !important;
        line-height: 3.2ex !important;
    }
    #current-entry .collapsed h2.entry-title { 
        font-size: 130% !important;
        font-weight: bold !important;
    }

    /* limit init image max height in content area. */
    #current-entry img {max-height: 120px!important;}
    #current-entry img:hover {max-height: none!important;}
}

注意最后面几行是限制 Reader 正文内容中的图片的最大高度的。把所有 feed 输出中包含的图片初始高度都限定在不超过120px的高度,只有在鼠标移上去的时候才恢复到一定的原始尺寸。这样对于快速浏览来说会比较高效。同样的类似样式可以用于各种显示图片的场合。

我自己实际在用的样式是在 DJBullwinkle 写的 Google Reader Absolutely Compact 基础上按自己的喜好修改的版本,在自己 1400 * 1050 分辨率下看可以有更好的阅读空间感,有兴趣的童鞋可以到这里安装使用

Last Modified on 2009-08-26 17:03
没有评论.
日志存档
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
本 Blog 原创内容
遵循以下授权:

Creative Commons
(创作共用) CC

署名-非商业性
-相同方式分享
ZEAL Blog 基于
Powered byPivot - 1.24.1: 'Arcee'
Pivot1.24.1
开发
系统部署于
Linode.com
Launched @
2005-04-27
Since 2005.04.27  梦想 就像鸡蛋 要么孵化 要么臭掉RSS Feed (Entries) | About me | Back To Home | @ZEAL | zbird.com | 沪ICP备05024379号