大猫の意淫网志

IE8 标准模式 max-width bug 求解

Tuesday, June 29th, 2010

今天遇到一挺郁闷的bug
IE8 标准模式
要实现如图的效果,图片宽度最大100px,小于100就自适应,
右边文字围绕左边的图

症状:
图片外容器宽度还是取决于图片原始大小而非max-width定义的大小

测试可跑如下代码
<!DOCTYPE html><html><body><div style="background:#2CA0B7;float:left;"><img src="http://ooxx.me/me.jpg" style="max-width:50px;" /></div></body></html>

也可以看DEMO页
http://code.sh/lab/demo/bug_ie8_max-width.html

哪位大湿有无解决方案?

Posted in codex | 40 Comments »

(无修正)给页面加Loading

Wednesday, November 26th, 2008

大家先来跟我学一个单词

那就是传说中的[無修正]!

跟着老师念: mo xiu sei (拼音第一声)

好,接下来我要对阿呜(aw)同学的那篇给页面加上Loading效果最简单实用的办法做一下修正

阿呜的方法系酱紫滴
建立一个div,一个css,一个js
div就素那一坨字

假装在异步加载ing...

css就素那一抹红

#loading{
	z-index:1;
	padding:5px 0 5px 9px;
	background:#c44;
	left:0;
	top:0;
	width:90px;
	color:#fff;
	position:fixed;
}

js让丫消失(用的jquery框架,推荐大家使用)

大猫同学进行了再一次的艺术加工处理
原html没啥子缺点,文案要改的话自由发挥
原css缺点:ie6不支持的position:fixed,再说ie也不支持圆角
考虑js去fixed成本太高,这里推荐加上float属性
原因是如果loading和大猫一样是竖着来的,不float会很挫
假若横着,float了也不错

#loading {
	-moz-border-radius-bottomright:5px;/* FF专用圆角属性 */
	float:left;/* 横竖都不挫 */
	width:26px; /* 如果你也想盲目跟风就修改width和height和padding */
}

原js消失方式是突然来那么一下
身为一枚老师,是绝对不允许早x的
so
这里采用了jquery.hide的参数slow(ie6下效果尤佳)

具体写法可以参照俺的common.js
jquery真是所有男人的福音啊

Posted in codex | 90 Comments »

没听说过的CSS优先级

Thursday, November 13th, 2008

<div id="oo">
<div id="xx" class="room"></div>
</div>

CSS优先级早已烂记于心,那么就来见识下几道题目

div#xx {float:left}
#xx {float:right}

#xx左边还是右边?

#oo div {float:left}
#xx {float:right}

#xx左边还是右边?

#oo #xx {float:right}
div#oo div{float:left}

#xx左边还是右边?

#oo div {float:left}
.room{float:right}

#xx左边还是右边?

#oo .room{float:left}
#xx {float:right}

#xx左边还是右边?

#xx.room{float:left}
#oo div {float:right}

#xx左边还是右边?

div#oo .room{float:left}
#xx.room{float:right}

#xx左边还是右边?

答案统一起见,好像都是右边
哦,不对,和大部分男人一样,偏左边

仅以此文献给所有奋斗在前端的炮灰们

<!-- 明城同学拿出小抄本(CSS2.1 的优先权图示)分享之 -->

Posted in 小日子 | 38 Comments »

修改wordpress默认表情

Monday, November 10th, 2008

像素画,恩,啧啧,左边的来自pixelians

像素表情
恩,啧啧,上边来自zing <还有配套的淫荡QQ表情哟
(俺身边的朋友们只要稍微风骚点的都在使,比如贱贱等一小撮人我就不点名了)

大猫的favicon.ico也出自zing同学之手,特表谢意
logo也重新做了下

想要在自己的wordpress里加入自定义表情,需要安装一款叫Custom Smilies的插件
怎么用的话就请看说明书了

但如何利用好捏?
比如大猫只是提取了一段JS(common.js),配合系统自带对应的图片名和表情字符,可以实现无插件评论框表情输入
只是刚学jquery,还夹杂着getElementById,哈哈,会js的人看一下源代码就知道了吧

值得骄傲的是俺把页面代码重新整理了下,完全通过W3C的XHTML CSS校验,没用一句hack,去除冗余代码,提升了N多速度吧~ 不由得暗暗佩服自己

Don't be a validation nazi

Posted in codex | 37 Comments »

Google Calendar界面推荐

Monday, August 25th, 2008

1024X768点我

本来想show一下刚到手的1440X900十九寸宽屏...可惜flickr只能上传1024档...

啊呀,其实是想打着OG... ...
完了的旗号,顺便分享google日历的一些东东

上面素偶滴google calendar界面,点击大图可以看得更清楚

所用插件
Better GCal 0.3 [option] [skin] [sleek,dark skin]
这个插件可以抛弃了...
修改样式GCal Redesigned
复制到文本编辑器里,搜索11px替换为12px(为了中文)
在最后/* Google Apps Fixes */前面的}内添加
.noleft nobr, #eventowner div, .calListLabel, .chead{font-size:12px !important}
然后在stylish里新建一个样式,起个名字,复制所有内容进去就可以用了
stylish 0.5.7下载点我

Firefox一般人我不推荐他,但是web developer或google重度使用者,是必备的
Google Calendar一般人我也不推荐,但是小队做项目,或个人工作记录总结什么的少不了

下一篇是如何把Google Calendar和Thunder bird搞在一起,尽请期待
最后推荐所有朋友升级IE6到IE7,绝对有百利无一害
[升级点我升级过程中建议别勾选下载最新补丁,否则...呃]

update:Better GCal 0.3带的主题有好多问题...

Posted in 小日子 | 47 Comments »