Moondy’s Zone

一位IT民工的点点滴滴…… WEB前端、网页重构、AS3

在某些条件下，IE6中会出现这样的BUG（似乎只在IE6里出现，其他浏览器没见过），在一些浮动元素的最末尾的几个字符会在该元素下面重复出现：

经过多次偿试后得出结论，大多数时间该BUG是由页页中的注释引起的，虽然可以通过给该容器的右空白边设置一个负值来解决，但很可能又会在其他浏览器中产生影响，所以最好的办法就是把注释都给去掉。

但是，有些时候页面里一个注释都没有，也会出现这个BUG，本民工不信这个邪，找了很多资料后，总算得到一个说法。这个BUG不一定跟注释有关但基本上都跟浮动有关，当页面里有type=hidden的input以及display: none的div的时候，也会引起这个BUG。解决的方法可以适当调整下该元素的位置，最通用的办法就是用一个DIV把它包起来就好了。

今天兴冲冲的把刚弄好的MP3播放器传到小博里调试，弄了好久，最后才发现是在服务器上读不了lrc文件（汗死）。但此外又发现了一个问题，在FF下FLASH不能透明！

原来是太性急了忘了在embed标签里面加wmode属性了，在这里就把各个浏览器下让FLASH透明的方法整理一下吧。

在IE6下很容易，把FLASH所在的DIV的z-index属性设为-1就可以了。

IE7下应该大多数人都知道，在<object>标签里面加上
<param name=”wmode” value=”transparent” />或者
<param name=”wmode” value=”opaque” />

在FF跟Chrome中，在IE7的基础上再在<embed>标签里添加属性wmode=”transparent”或wmode=”opaque”。

在这里列一个总的代码：

或者可以简写为
<object width="550" height="400" data="flash.swf" type="application/x-shockwave-flash">
<param name="wmode" value="transparent" />
<param name="src" value="flash.swf" />
</object>

前些天有个以前的学弟问我：为什么很多大网站都把背景图做在一张大图里呀？本民工不善言语，花好大劲才讲解清楚为什么会影响IIS链接数。但回头想想，平时真的很少去注意页面构建与IIS链接数的问题。

IIS链接数就是指同一时间内向服务器交换数据的的人数（个人理解），其间还有并发以及等待队列的问题。就像刚才所说的把背景图做在一张大图里的问题，我看网上对于单一图片算不算链接数有很多争论，其实也没什么好争的，试一试就会知道，自己建一个50个IIS链接数的服务器，页面里放50张图片，然后两个人同时打开这个页面的话，那50张图片会有一部分无法显示。这就很明了了，不管怎么说，把背景做成一张图只有好处没坏处，呵呵。

另外，对IIS链接数影响最直接的就是同时打开的浏览器窗口了，所以“_blank”可不要一个劲地用了。虽然很多时候建的一些小公司的站根本达不到IIS链接数上的限。

记得以前还在学校以及刚出来工作的时候，WEB1.0风格的网站别说圆角了，就连图片都是一大版一大版的。后来渐渐改进了些，切一个小角当背景图来做圆角，不管怎么说，只要用到图片的话，怎么说都浪费掉了一个IIS链接数（关于这个以后讲解），而用纯CSS来做圆角，不仅效果不比图片差，而且代码也并不复杂。

关于用CSS画圆角的原理，我们先把一个圆角给放大了来看，就很简单明了了。

这是一个5像素的圆角，我们可以看到每个像素只是水平边距不同，那么我们的样式可以这样写：

1
2
3
4
5
6
7
8

<style>
div {height:100px; border-right:1px solid #000; border-left:1px solid #000;}
b {display:block; overflow:hidden; height:1px;}
.b1 {background:#000; margin:0 5px;}
.b2 {border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;}
.b3 {border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;}
.b4 {border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;}
</style>

 
这是用b标签来当做圆角的转角，当然，理解了原理之后，可以延伸出多种的圆角。
 在html页面里这样写就可以了：

1
2
3

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div></div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

对于一个Web Designer来说，这本手册可说是必备的。目前大部分的中文版CSS手册都是苏昱整理或是以苏昱版为基础而整理的，这个版本算是个人觉得比较好用的一个版本了。本民工一直在用，呵呵。

下载CSS 2.0中文手册(含索引)