2009年4月25日星期六

Firefox3的IE8主题

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

  1. Vista-aero
  2. myFireFox
  3. Ie8fox

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

三者之间有微小差异：

  • 1与2的区别在于2的工具栏背景较深（貌似同一人开发）
  • 3与1、2的区别在于3状态栏较朴素，且3不支持标签组颜色
发帖者 ytzong 时间： 21:31 0 评论
标签：
2009年4月23日星期四

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

发帖者 ytzong 时间： 11:24 0 评论
标签： ,
2009年4月16日星期四

说说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

发帖者 ytzong 时间： 16:44 6 评论
标签： ,
2009年4月13日星期一

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

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

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

发帖者 ytzong 时间： 23:36 0 评论
标签：
2009年4月11日星期六

Firefox的IE7风格主题

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

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

配合以下扩展使用：

安装地址：

http://userstyles.org/styles/16661

发帖者 ytzong 时间： 00:16 0 评论
标签： ,
2009年4月8日星期三

裸奔啦~\(≧▽≦)/~

CSS Naked Day，博客去皮裸奔！

来历：

CSS Naked Day，也称CSS裸奔节或CSS裸奔日，这天，参加裸奔的Blog 将会去除页面上所有的 CSS 和广告裸奔一天，借此来表明CSS的重要性。当然如果你的网站是用table来布局的话这个节日对你来说并不是很合适。

2006年有将近800个国际知名网站参与此节日。

目的：

推动Web标准、提倡简洁为美、使用正确的HTML标记、体现良好的页面结构。暂时把页面设计抛弃，直接展示内容！

历届时间：

  1. 2006年4月5日
  2. 2007年4月5日
  3. 2008年4月9日
  4. 2009年4月9日

延伸阅读：

CSS Naked Day

发帖者 ytzong 时间： 23:24 0 评论
标签：
2009年4月3日星期五

body标签class属性的妙用(Google Reader前端简单分析)

身为greader的重度用户，之前写过stylish，今天来简单分析下其中关于body的一点小技巧。

  1. 区分不同浏览器

    IE6：

    <body class="ie ie6 loaded">

    IE7：

    <body class="ie ie7 loaded">

    IE8：

    <body class="ie ie8 loaded">

    GECKO内核（firefox/flock等）：

    <body class="gecko loaded">

    WEBKIT内核（safari/chrome等）：

    <body class="webkit loaded">

    以上值通过JS判断当前浏览器后给body的class赋值。

    当然，并不是每种浏览器都利用到了相应的class，部分是预留的，CSS中只用到了以下部分：

    .gecko .goog-inline-block{display:-moz-inline-box;}
.gecko .goog-inline-block{display:inline-block;}
.ie6 .goog-inline-block{display:inline;}
.ie7 .goog-inline-block{display:inline;}

    这段代码是为了实现跨浏览器的display:inline-block，其中只用到了gecko/ie6/ie7这三个class

  2. 布局切换

    当界面隐藏侧边栏时（以firefox为例）：

    <body class="gecko loaded lhn-hidden">

    body增加了lhn-hidden的class：

    .lhn-hidden #chrome-lhn-toggle-icon{border-color:#ebeff9 #ebeff9 #ebeff9 #68e;border-width:5px 0 5px 5px;}
.lhn-hidden #chrome-lhn-toggle:hover #chrome-lhn-toggle-icon{border-left-color:#fff;}
.lhn-hidden #nav{display:none;}
.lhn-hidden #chrome{margin-left:0;}
.lhn-hidden #chrome-title{display:inline;}
.lhn-hidden #entries .entry-body{max-width:100%!important;}

    通过给body添加/删除class="lhn-hidden"来实现侧边栏的显示隐藏，实现了结构、表现、行为的高度分离！

    用jquery的话则变得更加简单，JS只需以下几句：

    $('#chrome-lhn-toggle').click(function(){
    $('body').toggleClass('lhn-hidden');
})

    这样书写及维护起来非常方便。

  3. 换肤

    众所周知的GR彩蛋:上上下下左右左右BA，就是通过给 body 增加 class 实现的

    <body class="konami">

    konami 的 css 如下：

    .konami #sub-tree{background:#006f89 url(/reader/ui/1466947354-ninja-sidebar.gif) repeat-y left 0;}
.konami .lhn-section{background-color:#006f89;}
.konami .scroll-tree li{background:transparent;}
.konami .entry .entry-actions .star, .konami .entry .entry-actions .like, .konami .entry .entry-actions .read-state, .konami .entry .entry-actions .broadcast, .konami .entry .entry-actions .broadcast-with-note, .konami .entry .entry-actions .email, .konami .entry .entry-actions .item-link, .konami .entry .entry-actions .tag, .konami .entry .entry-icons .star, .konami .entry-likers-n .number-of-likers{background-image:url(/reader/ui/3207170781-konami-action-icons.png);}
.konami-like-image{position:absolute;}
发帖者 ytzong 时间： 14:10 0 评论
标签： , ,

Firefox 3 Bug：Iframe页面被带入Quirks Mode

前言：

在B/S系统中经常用到iframe，iframe中的数据用表格填充。

BUG:

标准模式时：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

进入iframe页面时th及td的字体不继承body的样式（偶尔出现）。

分析：

用firebug查看某一单元格（先在选项中选中显示浏览器默认样式），如下图：

其中style.css是我写的CSS，quirk.css为firefox在Quirks Mode时的默认样式，位于安装目录下的res文件夹中（各标签默认样式的html.css也在其中）。

可见firefox进入了Quirks Mode。

解决方法：

设置字体时，th/td和body写在一起： 
body, th, td{font-size:12px;font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;}

另外：

因该bug偶然出现，未测试以下是方法否可以解决，有兴趣的童鞋可以试下并留言： 
th, td{font-size:inherit;font-family:inherit;}

2009-4-14更新：

今天再次遇到这个问题，reset中已经设置了

th{font-size:inherit;font-family:inherit;}

其实是继承了quirks.css中的table的字体

最终的解决方法：

body, table{font-size:12px;font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;}

另外：

这里仅仅是字体的设置，Firefox中Quirks Mode的其他影响还需仔细研读下quirks.css

发帖者 ytzong 时间： 11:03 0 评论
标签： ,
2009年4月2日星期四

警惕：请谨慎选择免费E-mail提供商！

如今，几乎每个网络服务都跟电子邮箱关联，比较重要的有网上银行、支付宝等，等有一天你因为种种原因很久没上网，而且忘记了密码，你的免费邮箱又没了...

以下为本人亲身经历：

  1. 2000年左右用的etang免费邮箱，后来etang转型，邮箱没了，之后再没去过etang；
  2. 2002年左右用的sohu免费邮箱，后来有段时间没登陆了，再进去提示要激活，激活后邮件没了，之后再没去过sohu；
  3. 2003年开始用的比较多是网易163的免费邮箱，由于其附件下载速度比较快特意申请了几个分别用来备份比较重要的资料，常用的有一两个，比较正常，用来存资料的很久没登陆现在再也登陆不了了，估计账号被删了，到处找客服邮箱，始终找不到，以前咨询过的客服邮箱（回复过邮件）也失效了，整个帮助中心剩下个机器人！

免费服务也没什么好抱怨的，大家引以为戒吧。

发帖者 ytzong 时间： 20:15 1 评论
标签：
订阅： 博文 (Atom)