今天再调试一个css样式时间发现，ie跟firefox下不一致，代码改了半天，也没效果，实在高不定，最后我动用了··firebug-lite。才发现原来是缓存问题，代码压根就不一样····囧~~~~~~
顺便转个 Firebug Lite 使用简单使用方法，教育后人。
还是挺好用滴··，我用的是书签法。
原先以为载入js会很慢，但发现第二次后就比较快了··· 又是缓存问题，估计我脑子被门挤了，囧rz 阅读全部>>
发现最近淘宝UED开始火爆，各界小喽啰大喽啰都在关注，特别是 对与 他们刚发表的 网页的栅格系统设计，
此文章非常之邪恶，以至于观看者七窍流血，毒发身亡，走火入魔，死伤无数，场面非常之惨烈。总归一句话，似乎很多人都开始混沌，包括我。 可见 栅格系统 这狗东西 够猛，跟 莲花宝典 有得一拼。
发现评论中还是有所谓的资深人士滴，其中有一评论留下了一个国外的 grid systems 网站(地址再此)，研究了一晚上，恍然大悟。
以下分析以下我自己的一些理解：
1.首先我可以肯定的是 数学家尼古拉斯加宗（Nicolas Jaugeon）是个十足的懒人。就像 盖茨一样懒，要不然怎么出现windows这个东东。
2.(第一条是废话)
3.首先研究以下 淘宝UED 那篇文章里的那个公式： 如图
然后是一张A=40 & i = 10的grid systems 表：
个人觉得看不看得懂这两张图不重要，我的结论是 栅格系统 的核心思想是：简单，规整，易算 (也就是懒人思想^_^)
该思想打破了常规的像素（px）思想，也就是说一个网站如果定下：A 和 I 后 建立 一个栅格系统表后，之后前端写css 计算 宽度时 就不必拿起计算器啦··，查一下表就ok·· 提高了效率，也更加规范，此方法也同样适用于设计师。
4.理解了第三点后，开始深入了解，就是建立自己的 grid systems 表。
我的自己理解的方法有点不同于 淘宝ued 里的说法，因为当A和I 确定后，grid systems 表也就确定。然后咱们会发现，好多尺寸都用不了，比如W=960，因为上表内没有。那么问题就来了，怎样建立一个有W=960 的表呢？
很简单 也很复杂(别抽我，我喜欢这样的表达方式··@_@) 逆推法
数学问题：解开 A×n -i = 960 就可以啦···
此问题就像 淘宝UED 那文章的一个评论一样：这么多变量 还让不让人活的啊···囧~~~
首先尝试“去掉一个错误答案”(开心辞典)，i(栅格与栅格的间隙)是可以通过商量来确定的，相信所有前端就像数学家一样，像盖茨一样懒，喜欢简单，喜欢取整。（当然不排除邪恶之人，曾经我就比较喜欢用8做间隙，感觉8比10来的苗条，像东方女性+_+）
上面说的那个 国外的站就 是960 grid systems 貌似非常经典。
先跑开题分析以下 它的960 grid systems
该国外网站上有这么个介绍页面，个人感觉比较人性化地表现了 960 grid systems 链接在此
该介绍页面 介绍了 n =12 以及n =16 两种经典方案。
看完这两个方案发现两点：
第一点. A：i 分别等于3：1 和2：1。且都是十位取整，显然符合我的思想，计算简单。
第二点. 两边都有10px 的留白。这是淘宝ued那篇文章所没提及的，也就是说 A×n -i = W 中的W实际上是940。
通过以上两点 可以产生衍生思想，通过第一点的比例，可以推算，是否还可以使用其他比例,如4：1或者1：1。 通过第二点 可以推算，既然两边加入了留白，是否应该在 A×n -i = W 新增加一个参数，或者 产生一种更灵活的计算办法。
未完待续。。。
周末调试的时候，发现之前的ie6下显示png代码不够完善，于是上网转了篇详细的，一起学习。
CSS解决IE6下PNG图片背景不透明的问题
半 透明效果有时候会给页面增加不少色彩，特别是Vista盛行之后，半透明效果更加受推崇。在诸多可用于Web浏览的图片格式中，只有PNG格式和Gif格 式可以实现半透明效果，不过Gif格式的半透明效果很有限，而且会大范围失真，所以目前最流行的方式就是使用PNG格式图片。不过可惜的是，在 Internet Explorer 6及以下版本中都不支持PNG半透明效果（至少是不直接支持）。不过幸好Microsoft在这些浏览器中内置了其他的功能，可以帮助我们来实这种半透明 的效果。
一、我们看一下普通情况下在现代浏览器中半透明效果的实现
首先要有一张半透明的PNG格式图片，这个制作很简单，在 Photoshop中新建一个文件，在该文件中新建一个图层填充白色，然后调节透明度，删除背景，保存为PNG格式即可。你也可以下载这个PNG文件使 用。我们要做的工作很简单：只要把这个PNG图片指定为某个<div>的背景即可。例如可以使用下面的CSS规则：
程序代码
body {
background:black url(bg.jpg) no-repeat 0 0;
text-align:center;
}
div {
width:80%;
margin:0 auto;
text-align:left;
padding:7px;
background-image:url(tran.png);
border:3px solid #fff;
}
background:black url(bg.jpg) no-repeat 0 0;
text-align:center;
}
div {
width:80%;
margin:0 auto;
text-align:left;
padding:7px;
background-image:url(tran.png);
border:3px solid #fff;
}
二、在Internet Explorer 6中的实现
Internet Explorer中提供了提供了独有的滤镜效果，他通过filter:progid:DXImageTransform.Microsoft.AlphaImageLoader实现，现在是关于这个属性的有关知识：
程序代码
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。
true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
特性：
Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。
sizingMethod : 可读写。字符串(String)。参阅 sizingMethod 属性。
src : 可读写。字符串(String)。参阅 src 属性。
说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
因此在Internet Explorer 6 中我们还要加上现在这段话:
程序代码
* html div {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=”tran.png”);
background:none;
}
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=”tran.png”);
background:none;
}
注 意：这里我们使用了 “*”的CSS hack，这个CSS Hack是Internet Explorer 6独有的，在Ineternet Explorer 6的DOM结构中，默认HTML的父节点为*，而在标准的DOM结构中HTML就是根节点。所以上面的CSS 规则只有Internet Explorer 6 认识。
这样，我们在Internet Explorer 6、7、Firefox、Opera等最常用的浏览器的都实现了半透明效果了。
三、其它情况
但是上面都用PNG做背景的情况，有时候我们还会用PNG来做遮罩，比如下面这张Logo图片，
我们可以使用PNG遮罩来达到渐变效果：
那么我们可以使用下面的方法来实现
HTML代码段
程序代码
<div>
<img src=”logo.jpg” alt=”图片说明” />
<span></span>
</div>
<img src=”logo.jpg” alt=”图片说明” />
<span></span>
</div>
注意：这种写法完全是为了迎合Internet Explorer 6，<div>容器用来帮助内部元素定位，<span>用来覆盖在<img>标签的上面达到半透明效果。下面我们只需要设定一下它们的位置就好了：
程序代码
div { position:relative;}
span {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’filter.png’);
float:left;
width:200px;
height:100px;
position:absolute;
top:0;
left:0;
}
span {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’filter.png’);
float:left;
width:200px;
height:100px;
position:absolute;
top:0;
left:0;
}
不过，在Firefox中并没有filter这个属性，因此我们需要单独为Firefox中定制一个样式：
程序代码
div > span {
background:url(filter.png);
}
background:url(filter.png);
}
这样我们就可以使用遮罩来实现半透明效果了
不过如果有太多的地方需要实现这样的遮罩效果的话，上面的处理方式还不是最好的，首先它有冗余的HTML标签，此外还使用了绝对定位和相对定位。如果我们把上面的代码进行封闭效果会更佳。这里我们可以使用下面这段JS代码进行封闭
程序代码
<!–[if lt IE 7]>
<script language=”JavaScript”>
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split(”MSIE”)
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=\’” + img.src + “\’, sizingMethod=’scale’);\”></span>”
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent(”onload”, correctPNG);
</script>
<![endif]–>
<script language=”JavaScript”>
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split(”MSIE”)
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id=’” + img.id + “‘ ” : “”
var imgClass = (img.className) ? “class=’” + img.className + “‘ ” : “”
var imgTitle = (img.title) ? “title=’” + img.title + “‘ ” : “title=’” + img.alt + “‘ ”
var imgStyle = “display:inline-block;” + img.style.cssText
if (img.align == “left”) imgStyle = “float:left;” + imgStyle
if (img.align == “right”) imgStyle = “float:right;” + imgStyle
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle
var strNewHTML = “<span ” + imgID + imgClass + imgTitle
+ ” style=\”" + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
+ “(src=\’” + img.src + “\’, sizingMethod=’scale’);\”></span>”
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent(”onload”, correctPNG);
</script>
<![endif]–>
这段代码只在Internet Explorer 6中才会被运行。
下面我们可以像在Internet Explorer 7 和Firefox中一样写代码：
程序代码
<div><img src=”filter.png” alt=”图片说明” /></div>
程序代码
div {
background:url(logo.jpg) no-repeat;
}
background:url(logo.jpg) no-repeat;
}
解决了PNG跨浏览器的问题之后，我们可以利用它来实现更加复杂和更加绚丽的页面效果。
再转一篇：区别不同浏览器，CSS hack写法
区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
区别IE7与FF：
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
| IE6 | IE7 | FF | |
| * | √ | √ | × |
| !important | × | √ | √ |
另外再补充一个，下划线”_“,
IE6支持下划线，IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
相关：
- 在windows XP下面同时安装IE6，IE7和firefox
（firefox的不同版本间可以共存，但是IE的不同版本之间不能共存，本文主要是解决将IE6和IE7安装到同一个XP系统里面去的问题） - CSS的各种浏览器兼容一栏表
上周发的firefox 放大原理(一)吊足了胃口，今天我再放出第二弹，^_^ 听我慢慢讲来。
firefox 的放大原理 跟 ie的放大原理不尽相同，同样是放大功能，他们参照的放大基准不同。你可以尝试着对一些网站进行放大ctrl + 滚轮 或者Ctrl 和+ - 来放大缩小。
我也是通过实践得出的一些小结论，但不一定确切，就是 ie是基于像素px放大，而firefox 是基于行距em来放大。简单地说是，如果放大120%的话，阅览器会给css里所有的关于长宽相关的样式都乘以这个倍数，然后再显示出来。
如果你有ie 和firefox 两种阅览器的可以尝试对比一下。下面放大或者缩小的时候两个框就会体现出其兼容性。其中第一个例子是不兼容firfox放大功能的，而第二个是兼容放大。
如果你没有这两种阅览器，说明你可能不是web designer ，辛苦你了，愿意的话 去下一个玩玩，这感觉就像是发现新大陆。^_^
我是第一个例子，firefox不能对背景框放大和缩小
我是第二个例子，firefox可以对背景框放大和缩小，兼容性好
试过了请举手… 哦不 举脚… 噢 这里举不了，那回个贴 =.= (扯蛋@@)
相信查看过源代码的就会发现 要点。只要将宽度以及高度 定位em单位就实现了 em和px 的换算是这样的：当前div 的font-size 如果是12px 的话， 1em = 12px (ps：吐血，刚才用拼音打那公式 得出 1恶魔 = 10螃蟹，晕倒…) 。然后就发现问题，这样要300px换算成em 岂不是要除以12 ，那等于@！%￥￥#@…… 妈呀小数点，还不能整除。然后就使劲想办法，其实也挺简单，只要将当前font-size写成10px 就能整除了，当然你可以更爽快点，干脆改成1px，直接批改px成em就ok啦(妈呀，那字那么小还让不让人活啦)。所以呢，这个就要考虑到分层的合理性，要点就是：该写字的div上不要定 高宽， 这样就可以将font-size定为12px。
当然这样做会带来一系列的问题，要一一解决，并想出有效的方法。
又半夜了，下回再分析剩下出现的情况。
PS：研究CSS还是挺好玩的，虽然我挺讨厌这东西的，好多效果都要兼容ie 和firefox，整得头都大了
得，会见….
IE6 本身是没有放大功能的,IE7之后就有放大功能了, 不过基于IE核心的浏览器都有放大功能,如 傲游,世界之窗,腾讯TT. 这些浏览器的放大功能大同小异.
(等等… 你不知道怎么放大 推到… 放大功能是 用在以上浏览器的时候 按住ctrl + 鼠标滚轮,没有尝试过的小朋友现在可以试试看,还是挺有趣,可以马上发现 国内的网站有多么的牛×,一滚就烂, 国外的网站也牛×,只有小部分 比较专业的网站考虑到了该放大兼容性 )
放大功能在大多数情况下 用户派不上用场, 所以 被很多designer 忽略不计了
基于IE 的放大功能 与 firefox 的放大功能 解析是不同的(这个很久前就证实过)
最近一个不小心 发现 其实 该放大功能的 解析 语法 是基于 html 的表现形式的, 并且 我也初步了解了一些放大猫腻,
好了不牛掰了, 说正事
其实当前的blog 就是 个很好的例子. 您可以放心的滚滚看.
掌握几个要点, 就ok 了
先把我大方向,就是 css 样式 是影响放大原理的主要因素,
我再缩小范围
就拿 淘宝首页来说吧, 最近老上淘宝买东西,就拿它开刀了.
首先要说的是,淘宝网的css designer 应该是国内css 界的领航级任务, 我很多css 的技巧都来自于此,所以这么认为哈,不要笑话,有错误我就改,
不过淘宝网最近老出问题,打开的页面要卡好半天,页面里的JS太多, 一般机子我想吃不消
我们先用 基于IE 的世界之窗(我是世界之窗的fan)放大(ctrl+滚轮向上滚) 放大到105%, 页面就已经惨不忍睹了,
我在新版的腾讯首页上也试过, 同样也很惨,不过腾讯相对好点, 小部分区块变形
然后再用firefox 在试验
注意:firefox 的 放大 方式 刚好相反, 滚轮放大方向相反,向上是缩小
同样试过上面两个网站之后你会马上发现FF 同IE 放大功能的不同之处,虽然 不知道为什么,但 firefox 只是把字放大了
为什么只放大了字而没有放大图片背景呢`?
下回再说,
滔滔不绝
最新在啃
