omiga

简单就好

纯CSS实现tab切换

3条评论»

Demo

前两天在一个页面中使用锚点时偶然发现了纯CSS实现tab切换的方法，其实在很久很久以前就有人实现过了，但是我从没留心过，也从没看过具体的实现方式。因为JS其实也很简单，但是如果纯CSS能实现当然再好不过了。

但是，遗憾的是这种方法opera不支持～同时这种方法确实限制也比较多，比如往往需要设置另外的样式来区分当前激活的tab，纯CSS显然是无法做到的。所以如果要求不是很高，不用兼容opera，这种纯CSS的写法还是可以选择的！

wordpress主题—ND

10条评论»

前几天说要做个主题，原因有四：

  1. 原来的techicon真的用了很久了，虽然很好，还是视觉疲劳了
  2. techicon不是自己做的，虽然我改了很多东西～···
  3. techicon的宽度是固定的，晚上回家用宽屏看，很不爽～
  4. 呃～没有4了～···

其实早就在说自己做个theme，也画过好几张图，也写了几段代码，但是每次在中途就被我自己扼杀在摇篮中～:)

ND其实和techicon在布局上差别不大，我太喜欢techicon的三栏布局了，所以继续沿用。配色最开始主体部分用的白色背景，着实闪眼睛，液晶屏更甚，所以最后加了点灰色，减小了对比度，看着舒服多了。

遗憾：

  1. CSS中两处使用了hack～···（静态页面很完美，套上WP的主题标签，出问题了～至今没有得解！）
  2. Micro-Blogging页面fanfou API中的时间格式太BT了吧~很脑残！
  3. widget支持有点问题，但是我不用widget，无视～···

WordPress theme ND

IE透明背景滤镜的问题

发表评论»

测试IE6的透明png支持方式，其实也就是使用的IE的滤镜支持，发现两个问题（#box，a均使用了背景透明滤镜）： 问题代码：

<!--
body{margin:0; background:#999;}
div#box{height:300px; width:600px; margin:0 auto; margin-top:100px; position:relative; background:#333 url(bg.png) no-repeat center center; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=corp,src="bg.png"); _background:none;}
a{position:absolute; display:block; width:80px; height:35px; line-height:35px; color:#FFF; text-align:center; top:70px; left:85px; cursor:crosshair;}
a:hover{color:#F30; background:url(bt.png) no-repeat; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=corp,src="bt.png"); _background:none;}
-->
<div id="box"><a href="http://omiga.org">omiga.org</a></div>

1、如果#box使用了透明背景滤镜，#box的宽高设置在IE6、IE7中无效，#box的尺寸会根据其背景自适应。Demo

2、如果#box使用了透明背景滤镜，#box内伪类子元素失效。Demo

如果#box没有使用透明背景滤镜，不会出现以上问题。Demo

Firefox，Opera不支持通用字体系列名定义

4条评论»

为了保证页面字体的通用和兼容性，通常都会为字体设置一个字体系列，而且往往会在最后加上该类别字体的通用字体系列名。如：

p{font-family:Arial, Helvetica, sans-serif;}
h1{font-family:"Times New Roman", Times, serif;}
pre{font-family:"Courier New", Courier, monospace;}

但是事实证明Firefox和Opera并不支持通用字体系列名称的字体定义！事实说明一切～

2008-10-14日更新

非常感谢Csineneo的留言，Firefox和Opera必须手动设置通用字体方可生效！但是我仍然有一点疑问，不管是FF还是Opera这个过程都无疑增加了用户的使用难度，而且用户“不准确”的设置必然影响页面的显示效果，毕竟不是所有的用户都知道哪些字体属于衬线字体，哪些字体属于非衬线字体，哪些字体属于等宽字体～···难道FF和Opera无法自动选择合适的通用字体？

附：List Of Web Safe Fonts