DB2

前日看网站日志，发现IE 与Firefox 在对待外联CSS 上的一些细微差别。

<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="projection" />

对待这样的CSS定义，Firefox 会把screen.css 完整下载两次，而IE 仅仅会有一次访问。

123.112.2.228 - - [12/Apr/2007:09:34:10 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:39:11 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"
123.112.2.228 - - [12/Apr/2007:09:39:12 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"

但是对于另外一项，它们却有不同的表现。

<link rel="alternate stylesheet" type="text/css" href="http://www.aiview.com/css/print.css" media="screen" title="PrintPreview"/>
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/print.css" media="print" />

Firefox 针对print.css 访问了一次，而IE 则有两次，第二次是http 304 ，也属于正常。

123.112.2.228 - - [12/Apr/2007:09:34:10 -0700] "GET /css/print.css HTTP/1.1" 200 1486 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:11 -0700] "GET /css/print.css HTTP/1.1" 304 256 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:39:12 -0700] "GET /css/print.css HTTP/1.1" 200 1486 "http://www.aiview.com/" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11" 

再来看另外一个例子，screen.css 与screen-clearstyle.css 均引用了base.css 和extend.css 。

<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="screen" title="GetStyleBack" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen-clearstyle.css" media="screen" title="ClearStyle" />

@import "base.css";
@import "extend.css";

对于多个CSS 文件引用的同一个CSS，Firefox 不会再去检查文件修改日期，而IE 照例进行了多次访问，虽然后续仅访问了header，如果引用比较复杂的话，还是有一些可观流量的。

123.112.2.228 - - [12/Apr/2007:09:34:10 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:10 -0700] "GET /css/base.css HTTP/1.1" 200 1484 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:11 -0700] "GET /css/base.css HTTP/1.1" 304 256 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:11 -0700] "GET /css/extend.css HTTP/1.1" 200 1964 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:34:11 -0700] "GET /css/extend.css HTTP/1.1" 304 256 "http://www.aiview.com/" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)"
123.112.2.228 - - [12/Apr/2007:09:39:11 -0700] "GET /css/screen.css HTTP/1.1" 200 5327 "http://www.aiview.com/" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"
123.112.2.228 - - [12/Apr/2007:09:39:11 -0700] "GET /css/base.css HTTP/1.1" 200 1484 "http://www.aiview.com/css/screen.css" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"
123.112.2.228 - - [12/Apr/2007:09:39:11 -0700] "GET /css/extend.css HTTP/1.1" 200 1964 "http://www.aiview.com/css/screen.css" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11"

通过这次测试，还学习了一点额外的东西，对于浏览器来说，F5 与CTRL+F5 有一些区别，虽然都是刷新，但F5 仅仅会重新获取相比cache 有所更新的文件，CTRL+F5 则强制性重新获取所有文件。另外提一点，在Firefox 中，F5 与工具栏中的刷新按钮，或者是菜单中的刷新项(CTRL+R)，效果都一样，IE 也是如此。

 

顺便把CSS 切换功能 给取消了，还是保持简单点好。因此上面的部分代码，在页面源文件中已经找不到了，下面是个完整的参考：

<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/common.css" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="screen" title="GetStyleBack" />
<link rel="alternate stylesheet" type="text/css" href="http://www.aiview.com/css/screen-linestyle.css" media="screen" title="LineStyle" />
<link rel="alternate stylesheet" type="text/css" href="http://www.aiview.com/css/screen-clearstyle.css" media="screen" title="ClearStyle" />
<link rel="alternate stylesheet" type="text/css" href="http://www.aiview.com/css/print.css" media="screen" title="PrintPreview" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/screen.css" media="projection" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="http://www.aiview.com/css/aural.css" media="aural" />
<script type="text/javascript" language="javascript" src="http://www.aiview.com/switch-css.js"></script>

 

我一直使用Firefox 浏览器，IE的收藏夹里只有淘宝、北京移动以及网银几个不支持Firefox 的links。近日突然发现自己blog在IE中长页面的滚动非常迟缓(Firefox中正常)，一跳一跳的，很不舒服，于是立刻想到了前阵子新加的功能：对于<pre>标签限制宽度和最大高度 ，为了兼容IE，在css中使用了ie hacks以及expression表达式，这可能会加重浏览器绘制工作量，从而导致页面滚动迟缓。经试验，并不是以上代码导致的，根源竟是页面底部的Tag cloud，如下图：

模板：

  <div id="tagcloud"><div class="inner">
<h3>Tags</h3>
<MTTags>
<a class="h<$MTTagRank$>" href="<$MTInclude module="Tag URI"$>" title="<$MTTagCount$> entries"><$MTTagName$></a>  
</MTTags>
</div></div><!--tagcloud--> 

Style：

#tagcloud a {
text-decoration: none;
}
#tagcloud a.h1 {
font-size: 200%;
}
#tagcloud a.h2 {
font-size: 180%;
}
#tagcloud a.h3 {
font-size: 160%;
}
#tagcloud a.h4 {
font-size: 140%;
}
#tagcloud a.h5 {
font-size: 100%;
}
#tagcloud a.h6 {
font-size: 90%;
}

Tag 数量比较大，但对于产生此问题的原因还是不解，有人遇到吗？

I use <pre> to wrap the programming code in my pages. What I want is:

• the code within <pre> would not have any unexpected line wrap.
• display horizontal or/and vertical scrollbar only as need to have.
• I don't want the fixed width. it should be flexible with the window width change, and would not exceed to the menu part. the horizontal scrollbar would have if needs.
• I want to have the flexible height that depends content, but maximum 450px. the vertical scrollbar would have if exceeds.

That's all I want, but it won't work out with both Firefox and IE without hacks. I had this style first.

pre {overflow: auto;border: 1px solid #ccc;width: 90%;max-height: 450px;padding: 8px;}

overflow: auto tells to have scrollbar as need. maxheight tells the limitation of the height. I soon found that maxheight is not supported in IE. IE would extend the height as far as the content need. And that's not all, IE push it much. With overflow: auto, you will get the unexpected vertical scrollbar that follows horizontal scrollbar. The reason is that IE will see the horizontal scrollbar as a part of content, then it will give the stupid vertical scrollbar like this. (you'll see an unexpected vertical scrollbar below if you use IE)

Here's a simple for test IE vertical scroll bar problem. When this line is long enough to exceed container that makes IE have a horizontal scrollbar, then the vertical scrollbar comes. If this line is not long enough for your screen yet, please decrease your screen size.The style this object using:<pre style="border: 1px solid #cccccc; padding: 8px; overflow: auto; width: 90%">

There's solution found here and here(none English, none Chinsese, only see the code) , they use IE hacks to resolve the vertical scrollbar problem. It do works, but I still prefer to have the limited height. I got this IE hack for having maxheight in IE. Below's the style.

pre {overflow: auto;border: 1px solid #ccc;width: 90%;max-height: 450px;padding: 8px;}* html pre { /* IE hacks */height: expression(this.scrollHeight > 450 ? "450px" : "auto");}

For the damn vertical scrollbar in IE I got an idea from the code in this post. The idea is to encrease the height after IE calculated the object height. Here's a show, the damn vertical scrollbar in the example above will be removed.About IE scrollHeight logic there's more detail, here's an artible for it.

Here's a simple for test IE vertical scroll bar problem. When this line is long enough to exceed container that makes IE have a horizontal scrollbar, then the vertical scrollbar comes. If this line is not long enough for your screen yet, please decrease your screen size.This style remove the unexpected verticle scrollbar.<pre style="border: 1px solid #cccccc; padding: 8px; overflow: auto; height: expression(this.scrollHeight+15); width: 90%">

It works but new problem came. This style width: 90% is not going to act as expect if I use above code. IE will confuse the base line between window width and container(div) width for the objects having scrollHeight > 450. I have to have below code with it together in IE hack to resolve. IE brings too much issue! 

 

height: expression(this.scrollHeight > 450 ? "450px" : this.scrollHeight+15);width: expression(this.scrollHeight > 450 ? "62%" : "90%");

 

62% is an experience value that works for me. For you it depends your page structure and your favor. Finally, I had my things done. Below is the finally code in my style sheet. The image code.gif is a cool idea to personalize your code area.  CSS Selector ":before" and ":after" could do the similar thing but it's only supported by CSS 3. Currently CSS 2 is widely supported. Another article(Chinese) about CSS Selector.

pre {margin: 16px;overflow: auto;padding: 40px 0 20px 60px;max-height: 450px;background: transparent url(/images/code.gif) left top no-repeat;}* html pre { /* IE hacks */height: expression(this.scrollHeight > 450 ? "450px" : this.scrollHeight-40);width: expression(this.scrollHeight > 450 ? "62%" : "90%");}