我的天

等待，又是的等待！我非常讨厌等待好吗！凭什么是得我跟着你们去做你们的事，而不是你们跟着我们去做我们的事呢？！这完全就是觉得我们没事干闲得发慌于是硬是给点事我们干啊啊啊！那种从一开始就被看低一等的感觉太恶心。多年以来都说什么职业不分贵贱，但如果连你正常工作的时间和机会都没有，一辈子地当兼职神马，这算个毛线啊啊啊啊啊啊啊。别人有心要坑你是无法避免的，不往那个地方费任何关注就好。我不能理解那些不做好自己的事却一直纠结别人“可能”没事干的人到底什么心态。

昨晚打算花点时间解决DIR字体的问题，结果花了一整个晚上，到1130才睡觉居然还都没搞成，我被我以为的小儿科绊了一个大筋斗。一直以来DIR的某些字体用的是Google的font API，但自从G老师在天朝被阉割得越来越厉害后G老师的众多API当然无法使用了。我对这个并不怎么烦心，因为翻墙是我的基本技能，但不是所有人都懂这个且习惯做这个。过了好长的时间（接近大半年）我终于忍无可忍，决心要把从前简单地用

<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:bold' rel='stylesheet' type='text/css'/>

实现的功能改掉，因为，在天朝根本无法load出这个，要等浏览器load很久才最终意识到自己load不出是个连我自己都不愿意等待的事。所以很长一段时间以来，要打开http://adelrio.diandian.com/我都是用翻墙方式的，并不是这个网站有什么特别，只是因为我引用了需要Google API的东西，而那些东西又load不出来，所以导致网站假死，如果有足够多的耐心，当然可以打开，但显然，我连自己都懒得等。Google的Font API是个非常优秀的玩意，用一个语句就解决了让你自己去折腾半天都做不出来且很累赘麻烦的东西，他们有精确的浏览器判定，有经过cdn最优化的下载文件，我们这些凡夫俗子的脑子怎么可以跟他们比。精准我们比不上，因为我们不是浏览器控怎么可能每个都耳熟能详知道它们的脾气如何，要用什么格式的东西去喂养。我们也不会得到Google那么豪气干云的世界各地服务器，文件下载速度谁也不能保证能比他们更快了。但即便如此羁绊，我们还是得用很落后老气肯定有缺陷的方法去取代方便简单的高精尖，因为，事实摆在眼前，Google在天朝无路可走。

我用的方式是在css里自定义字体，也就是在css里作一个声明，从外部引用字体，然后在css里需要的某些元素里使用。这个方法很容易被明白，但难就难在不同的浏览器只会辨认某种或某几种字体，所以你要适配所有新老浏览器就得搞出N多来，比如说：woff，woff2，eof，ttf，svg等等。woff可以被Firefox和版本35以下的Chrome辨认，woff2貌似是Chrome 35以上的选择？反正我用了woff2，Chrome 39还是理解无能。IE这个屌丝只认识eof，IE6-8和IE9认识的eof版本还不一样！ttf比较大路iOS，Android，Firefox，Chrome，Safari，Opera都通杀。老版本的iOS只认识svg。想死的心都有了有木有！这还只是个开始！因为Firefox和IE还有同源网站规则，如果字体和网站都在同一个地方当然没问题，但作为一个前端设计，我怎么可能控制得了东西都能在服务器端呢！引用使用字体会让浏览器觉得不安全，和图片等不同，不同源就会导致浏览器无法正常加载你放在别处的字体。我那个去！我一直用Firefox做测试，难怪怎么搞怎么不对劲，但在Chrome上却一直对劲得很。关于这个不同源的问题，我举手投降。因为我肯定做不到让字体文件和DIR同源，我也做不到要求服务商点点在服务器给我来一句开绿灯的语句让我的字体文件不被浏览器觉得不安全。我只能自欺欺人地觉得，估计只有我这种少数屌丝是用Firefox来开DIR的吧…… 我自己的做法是在本地就安装我的特殊字体，字体引用的第一步是查找local，有了就不用下载那么麻烦了，不用下载当然在FF下也能正常显示字体。我已经尽力了好吗！

我使用的语句是：

@font-face { font-family: 'Cabin Sketch'; font-style: normal; font-weight: 700; src: local('CabinSketch Bold'), local('CabinSketch-Bold'), url(http://x.srcdd.com/farm1/5b7f4a/8fe24307/cabinsketchbold.woff) format('woff'),  url(http://x.srcdd.com/farm1/5b7f4a/28d84744/cabinsketchbold.woff2) format('woff2'), url(http://x.srcdd.com/farm1/5b7f4a/fbf35def/cabinsketchbold.ttf) format('truetype'), url(http://x.srcdd.com/farm1/5b7f4a/47370689/cabinsketchbold.eot) format('embedded-opentype'); }

即便这么写，但在IE7-8下仍是无法正常显示的，具体原因可能是同源规则。虽然设定了woff2，但在Chrome 39下仍是无能，原因母鸡，难道39也玩同源！但Chrome 35是woff和ttf都通杀这么好人的啊啊啊啊啊啊啊，怎么越长大越不对劲了！Firefox因为同源规则，无能。所以写了这么一大堆，试图去hack，但最终不过是在Chrome 35，搜狗浏览器，以及安卓手机（小米1S青春，Android版本为4.1）下OK。关于是不是同源规则导致的显示出错我可以在自己的网站上做测试，但知道和不知道结果都一样，泪奔～ 因为知道了我也无法要求点点在服务器那边做点什么。

要成功一点都不容易，要失败，一个细微问题就足够了。

就功能而言，Principe for mars已经完成了！

就如昨天所预测，在头脑清醒的时候我用了不到15分钟就解决了昨天搞不懂的两个循环问题。事实再次证明，开夜车是没用的，纠结也是没用的，合理分配资源，让效率发挥到最高境界才是王道。

今天下午我做了什么呢？感觉我上午弄完了2个循环问题后大体模板就出来了。噢～～～ 记起来了！我去玩CSS验证，结果发现，虽然说验证支持的是CSS3，但我的CSS3定义他们还是视而不见说我错。最明显的当数transform、transition、word-wrap以及progid:DXImageTransform.Microsoft.AlphaImageLoader，前面两个是CSS3的特效，第三个CSS很普遍了，第四个，是该死的IE8前滤镜。我开始以为是我写法的问题，但后来发现我怎么写都不对头，即便我把CSS3教程贴进去也说不行，我就得出了结论，疯狂的不在我，而是那个表面上说CSS3了，实际上不然的验证器。也对XHTML做了验证，翻出来的基本都是点点< ? ?>的问题，老天啊，这是人家的服务器请求啊～～～ 我错了，我不应该把模板代码贴去验证，我应该让模板生成网页后拿那玩意去验证，否则我傻眼了，验证那个也傻眼了，净是抓到一些无关重要的东西。

关于昨天2个循环失败，是因为那个我照抄的命令行不知为什么硬设置了一个完全可无的变量，于是，我注意修改了会变动的变量，却完全忽略了那个无关紧要的东西，因为有些循环是叠加的，所以无关紧要的名字重复了，当然就会服务器出错。于是今晚，我直接把无关紧要的删掉了，代码顿时少了起码10个字母+，也不会再犯那些错误了。有时我真不理解，为啥明明1个字母能解决的东西，要起一个10字母+长的名字，并为它匹配一个无关紧要的朋友变量呢？为了别人抄代码的时候头大点？

今天用了TopStyle去整理CSS，乱七八糟的代码顿时变得井然有序！！！整理完以后东西是不会少的，但顺序软件是严格按照字母表去排，所以，有些必须先后才能出效果的东西就要手动了。通常来说，CSS里是不会用大写去命名，但The Stitch就是这么的怪异，整理出来的CSS全部把大写都小写化了，所以呢，要手动地把大写的改回来……我也想用小写啊！但那个跟某js功能有关，不想改js的说～～～

今天已经对XHTML进行了人肉的核对，每个层次，每个调用的格式，有没有调用格式是虚的，无内容的。明天，如果有时间，将会对CSS进行人肉核对，那些本不该存在而却占空间的，你们是时候该颤抖了。

如果转行的话，我或许可以做个网页设计，但，我为啥要转行呢？

今天很无聊地又在虚拟机里装了一个自带IE6的XP。用的版本是（修正）金狐XP SP3 (IE6/IE8，GHO/WIM) 极致系列[4+1+1] 【唯美之最，快稳兼备】。安装很顺利，到现在为止我已经在虚拟机里安装第4个XP，第7个Windows系统了。

家里这台WIN7里有2个虚拟系统，一个是金狐的龙祥XPIE8一个是金狐修正XPIE6，开机和关机速度差不多，但开机的话，IE8的要快一点，但差距在5秒内。

你还记得IE6的icon么？左边的就是了，浅蓝色的E标志，右边的是IE8，有条黄色的带子。我还记得IE5是普蓝色没有渐变的，但IE7呢？完全没印象…… IE9的标志也是浅蓝色渐变加黄色带子，但那种立体感和IE8完全不同，E更大，更平面。

同样是纯净版，IE6和IE8的XP系统占用空间一样大。

哈哈哈，打开IE区别就明显了。IE6，把margin和负数定位视都不见。

久违了，好久好久好久都没见过IE6的标志，看到IE6，我想起那个Windows 98和Windows XP的过渡系统Windows Me。IE6曾几何时是XP的标配啊！

系统占用量，IE6比IE8少19MB。但说你也不信，它们的打开速度和载入完全速度是一样的！

仔细看进程，发现除了二者必须有的IEXPLORE.EXE外，IE8还有另外一个IEXPLORE.EXE，而那个进程就13MB了。为啥呢？我记得打开同样页面的时候IE8曾试图弹出一个窗口，那是电信ADSL的广告，但被我关掉了，难道是那个的？还是因为IE8有了选项卡功能导致2个IE进程？

无接缝界面看看IE们。

杯具的IE6啊～～～标题导航栏完全无视filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);难道IE6很傻很天真地只允许每页面使用一个滤镜？各种margin问题，用div做的hover也无法实现。除此以外，正常阅读是不受影响的，因为正文没啥花俏东西。IE6，纯粹是格式类丑一点而已。

IE8，相比IE6好多了，margin正常，hover正常，不正常的就只剩下CSS3效果——圆角、阴影等。啥？你已经觉得这已经很正常了，不知道原来这个网页还有更正常的效果？

我们用IE9来了看看吧！当然了，到现在为止IE9只能在Vista或以上系统运行。

IE9，在界面上更简洁的浏览器！默认没有菜单栏，默认标签页，默认刷新、暂停、搜索融入到地址栏。这么简洁的构造让IE的正文空间更加大。对比IE6、IE8和IE9，你会看出区别的！

对头，这就是IE9的效果！

这也是Chrome和Firefox里看到的效果。圆角、虚线（中间滑动标题导航的地方）；标题和描述下的那些导航标签有半透圆角按钮效果；页面导航按钮有阴影效果。这些都是IE9支持的CSS3做出来的。

老天啊，跨越了4代的IE才正常表现出了我要展示的东西，情何以堪。不过，如果用10年前的浏览器去测试，它们也不可能做到。（Chrome肯定没有10年，Firefox好像也没有吧……）

今天下午睡了5个小时，因为感觉没事干，现在有点痴呆，但非常满足。

追求梦想是一个永不止步的过程，正是因为期间的不容易才让一切变得不是一般的有趣。

昨天发现了IE8的问题，我开始拼死地想做IE9的网页测试。最后，我装了微软的Vitural PC 2007，虽然，那个玩意说不兼容Home Edition，然后我下载了Win7-IE8的镜像文件，在解压过程中波折重重，其中包括首先把硬盘的东西移走，然后修改临时文件夹到最后的得知解压文件大小为近9GB的时候我不得不把原来FAT32的磁盘在数据没有备份的情况下格式化为NTFS。冒了很大的风险，经历N多困难，最后当我能在虚拟机里运行出英文版Win7的时候，那个激动啊！因为我下载的是IE8，需要升级为IE9。首先我需要解决的问题就是我必须让虚拟机上网，好不容易在NAT模式下自动匹配IE上网了，用了很长时间我才明白到这样的IE9升级可以说是不可能完成的任务。

我甚至要狠心装一个虚拟机去测试网页啊！我为什么要这样呢？因为从Goolge的分析数据看来，浏览我网站的人中有40%来自IE9，我必须照顾IE9的效果，同时，在中国，IE8以下是盛行的，所以，IE6-9是我必须面对的问题。

幸好，有网友做我的坚实后盾，帮我在IE9下刷新测试。谢谢他！但，如果可以选择的话，我希望一个人能把这些测试工作都完成好。

都说IE9不理会IE从前一直使用filter，事实证明不然！IE9会CSS3，但IE9没有把filter视而不见，而是偷偷地继续调用了那个滤镜。特别，当CSS3和滤镜同时在一个class里设定的时候，它两种都用上了！恰逢，我今天用到的是CSS的垂直翻转效果。

IE9下CSS3是这么表述的：-ms-transform:translateX(-100%) rotate(-90deg);-ms-transform-origin:right top;

IE9以下的IE版本，filter是这么表述的：filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

只使用filter，IE9下是这个效果。

CSS3和filter都出现在同一个class里，IE9下是这个效果。

只使用CSS3，IE9下是这个效果。

于是，谁还敢说IE9对filter完全没feel呢？如果真的没feel，应该像Chrome或Firefox那样鸟都不鸟，但显然不是。

昨天的问题有解决思路了——精准的浏览器选择！

我一直都觉得应该把代码都写在class里，当遇到IE9的时候kill掉一些。但无论我用filter:;，filter:-;，filter:none;等都无济于事，可能filter根本只能enable和disable。后来，点点的工程师提醒了我，减法不行的话，我可以用加法！我不一定要把代码全部都写在class里，遇到IE9减去，我可以直接不在class里写filter，而当遇到IE9以下IE时再加上！

哇咔咔，就是这个思路了！

所以最终，我在主体class里去掉了filter，在文件头加上了这么一段hack。

1
2
3
4
5

<!--[if lte IE 8]>
	<style type="text/css">
		.stitch_active > h2,.stitch_header > h2{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
	</style>
< ![endif]-->

地球终于被拯救了！！！！在写这段hack的时候出过一个笑话，我把“lte”写成了“Ite”，幸好被点点工程师发现了！尼玛，lI1（小写L、大写i、数字一）在某些字体下真的很难分辨的说。“lte”的意思是小于或者等于。

累并快乐着真好！

对Principe在IE8下的PNG黑边效果我耿耿于怀！（Chrome、Firefox等完美支持的表示毫无压力）

虽然，我知道这是IE9之前的硬伤！在IE9之前的IE7和IE8虽然已经支持了PNG的透明功能，但它是通过偷偷调用fliter滤镜实现的，这个bug在于，如果你再使用其它滤镜，那么PNG的透明滤镜就歇菜了。

昨天花了不少时间在这里，未果。我一直觉得这是CSS的问题，但实际上，这纯粹是万恶IE的问题。

为什么我的滑动标题会出现黑框呢？

这个滑动标题栏的XHTML是这样的

1
2

<span class="stitch_header"><h2><span>{$text.title}</span><b class="text-icon"></b></h2></span>									
<span class="stitch_active"><h2><span>{$text.title}</span><b class="text-icon"></b></h2></span>

部分CSS是这样的

1
2
3

.stitch_active > h2,.stitch_header > h2 {color:#FFF;text-shadow:0 1px 0 rgba(0,0,0,0.5);font-weight:440;z-index:2;position:absolute;top:0;left:5px;width:450px;font-family:arial, serif;font-size:24px;-webkit-transform:translateX(-100%) rotate(-90deg);-webkit-transform-origin:right top;-moz-transform:translateX(-100%) rotate(-90deg);-moz-transform-origin:right top;-o-transform:translateX(-100%) rotate(-90deg);-o-transform-origin:right top;transform:translateX(-100%) rotate(-90deg);transform-origin:right top;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);margin:0;}
.stitch_active > h2 b,.stitch_header > h2 b {display:inline-block;position:absolute;top:5px;left:5%;text-align:center;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}  
.text-icon {background:url(http://x.libdd.com/farm1/5b7f4a/4a3b11a7/text-icon.png) no-repeat top left;width:32px;height:32px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://x.libdd.com/farm1/5b7f4a/4a3b11a7/text-icon.png');}

解释一下哈，为了把这个标题栏打竖显示为现在的样子，这里做了2个翻转，一个翻转是逆时针90度（rotation=3），一个翻转是顺时针90度（rotation=1）。不知道翻转是神马？请这边学习。然后呢，逆时针的用在了h2，顺时针的用在了控制icon图标的b。也就是说在load到png之前已经有2个滤镜了，png的默认IE滤镜必须的失效。肿么办呢？

我用了一个非常笨的办法，在每个icon PNG那里手动加上滤镜，且把b的顺时针转向功能禁止掉，改用在PS里直接把图片顺时针翻转90度。

代码类的，即在.text-icon里面加上filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://x.libdd.com/farm1/5b7f4a/4a3b11a7/text-icon.png’)，这么一来就是强制在load这个png的时候用滤镜了。

至于为什么要把b的翻转禁止掉而用PS图片翻转呢？因为b优先于.text-icon，即便我在后者里设置了强制滤镜，b的滤镜还是优先，于是还是黑边。

PS下的翻转太简单了

翻转前

翻转后

人肉看，当然觉得别扭，但整体效果，那是必须的好。

有图有真相！

于是，终于，在IE8下，Principe的icon图标算是正常了，内牛满面。

今天下午网友才提醒我Principe在IE9下显示怪异，这主要是IE9不支持filter但却不像Chrome和Firefox那样不加理会，而是自作主张搞了一些神马出来。

老天啊～～～ 试问一个不用IE的人怎么会知道这些问题呢！更杯具的是，单位的电脑是XP，XP无法安装IE9，我家里有WIN7可以安装IE9（现在是IE8），也有XP，能考察IE8。为什么，为什么，为什么现在才告诉我事实这么残酷呢？？？泪奔～～～

已经下载虚拟机，已经下载WIN7+IE8（可升级为IE9）的文件。

哎～～～ 玩网页设计，我容易么我～～～