Firefox3的IE8主题

今天逛了下谋智，找到几个IE8主题：

1. Vista-aero
2. myFireFox
3. Ie8fox

最大的亮点是侧栏书签可以像IE7/8一样悬浮：

三者之间有微小差异：

• 1与2的区别在于2的工具栏背景较深（貌似同一人开发）
• 3与1、2的区别在于3状态栏较朴素，且3不支持标签组颜色

IE 6/7 鼠标滚轮失效Bug

前言：

万恶的IE总是带给我们“惊喜”，比如滚轮失效。

解决方法：

你可以尝试用以下方法解决：

1. 去除以下代码（IE7下遇到过一次）

   html{overflow-x:hidden;}

2. 在滚动区域加上如下代码（IE6下遇过一次）

   selcetor{background-color:white;}

延伸阅读：

Internet Explorer bug: Broken mouse wheel scrolling Demo

说说display:inline-block

前言：

Firefox 3发布后，我开始肆无忌惮的使用inline-blcok...

基本用法：

1. inline元素的inline-block：

   span{displsy:inline-blcok;}

2. block元素的inline-block：

   div{displsy:inline-blcok;#displsy:inline;#zoom:1;}

   #开头的为针对IE6/7的hack，多数人用*，用*的话我使用的格式化工具会出错。

遇到的几个问题：

1. 代码

   格式化对间距的影响：

   HTML：

   <ul>
       <li class="current">1</li>
       <li>2</li>
       <li>3</li>
   </ul>

   注意代码的缩进为4个空格

   CSS：

   /*请自行引入YUI reset*/
   body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
   li{display:inline-block;#display:inline;#zoom:1;padding:1px 5px;border:1px #ccc solid;background-color:black;cursor:pointer;color:white;}
   li.current{background-color:#c31909;}

   以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

   

   可见除IE6/7外的浏览器的li之间有4px的间隔。

   HTML将缩进去除则正常：

   <ul>
   <li class="current">1</li><li>2</li><li>3</li>
   </ul>

   以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

   

   由此分析，这4px可理解为一个空格。

   当然，我们的HTML代码是给人看的，加上编辑器有格式化代码工具，缩进不能去除，而且在实际应用中li之间往往有一定的间距，所以我的做法是顺水推舟，仅对IE 6/7 hack：

   li{#margin-right:4px;}

2. overflow引起Firefox 3 bug：

   HTML：

   <a href="#">订阅</a>

   CSS：

   /*请自行引入YUI reset*/
   body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
   a{display:inline-block;width:3.5em;padding:3px 0;background-color:red;font-weight:bold;text-decoration:none;text-align:center;color:white;}
   a:hover{color:black;}

   以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE6）：

   

   IE 7/8 的padding有点小问题，不过基本可以忽略。

   如果给a加上overflow:hidden（此处的overflow:hidden没有必要，仅为演示使用）

   /*请自行引入YUI reset*/
   body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
   a{display:inline-block;width:3.5em;overflow:hidden;padding:3px 0;background-color:red;font-weight:bold;text-decoration:none;text-align:center;color:white;}
   a:hover{color:black;}

   Firefox 3显示效果：

   

   text-align:center失效！其余浏览器皆正常（这里有点小插曲，开始我误以为是td中的inline-block元素不能居中，后来发现是overflow:hidden的问题），经测试overflow:auto也会出现此问题，不过这个更少用到。

3. IE 6的line-height失效：

   HTML：

   <p>欢迎使用<span></span>飞信</p>

   CSS：

   /*请自行引入YUI reset*/
   body{margin:10px;font-size:12px;font-family:Tahoma, Arial, Helvetica, sans-serif;}
   p{background-color:yellow;line-height:5;}
   span{display:inline-block;width:16px;height:16px;background-image:url('http://images.n20svrg.139.com/simple2008/coremail/images/simple_icons.png');background-repeat:no-repeat;background-position:-500px -50px;vertical-align:middle;}

   以下为IE 6/7/8显示效果（Firefox 3/Safari 4/Chrome 2同IE8）：

   

   未找到根治方法，可变通一下用padding解决：

   p{background-color:yellow;padding:2em 0;}

总结：

即便如此，我还是会继续使用下去-:P

[视频]荒谬大师--沈玉琳

这是存在我硬盘有段时间的一段视频，本想传到YouTube的，不过现在被河蟹了，o(╯□╰)o

如果你不知道谁是沈玉琳，请看：维基百科 - 沈玉琳

Firefox的IE7风格主题

使用Chrome主题没多久就腻了，于是乎又整了个IE7风格主题：

参考了一些现成的脚本，比如[Fx3.*] IE style tabs (untested)

配合以下扩展使用：

• Tab Mix Lite CE（调整标签宽度）
• Strata Aero（蓝色主题）
• Personal Menu（Chrome式菜单）

安装地址：

http://userstyles.org/styles/16661