J.chong

在Youtu，欣賞請goagent

耿耿於懷
曲:伍樂城
詞:黃偉文
唱:麥浚龍
妳最近還好嗎? 尚愛看少女漫畫嗎
最近幾乎沒露面 妳有新對象嗎
真想帶妳見見 我剛識到的她
我想聽妳意見 這算是病吧
為何無論我 願意怎樣試
怎樣也 不可一樣愛慕她
難道沒練習太耐 感覺都追不回來
試圖再 努力愛 也顯得不自在
不懂得如何談戀愛
還是我太愛妳 對過去太放不開
難道是寂寞太耐 生銹的鎖不能開
鑰匙也折斷了 留在舊患鎖在懷內
放滿對妳的愛 難怪跟誰也 再沒法戀愛
我 有時仍很怕 路過妳那從前的家
往事若然未落幕再揭起有害嗎
真想帶妳見見 我剛識到的她
我想聽妳意見 這算是病吧
為何無論我 願意怎樣試
怎樣也 沒令自己戀上她
難道沒練習太耐 感覺都追不回來
試圖再 努力愛 也顯得不自在
不懂得如何談戀愛
還是我太愛妳 對過去太放不開
難道是寂寞太耐 生銹的鎖不能開
鑰匙也折斷了 留在舊患鎖在懷內
放滿對妳的愛
難怪跟誰也 再沒法戀愛
難道沒練習太耐 感覺都追不回來
試圖再努力愛也顯得不自在
耿耿於懷從前的愛
從沒有 振作過 痛了再痛也應該
難道是寂寞太耐 生銹的鎖不能開
往事卻 似斷箭 還剩下在體內
若懷內 放滿對妳的愛
害怕一直也 再沒法戀愛

Juno又谓：“呢样嘢吸引我开始咗呢只碟企划，而佢好玩地方，今次好系角色扮演，其实工作同导演好相近，我哋去发展耿耿于怀嘅呢个男仔，当佢系一部电影咁，冇可能得一个角色，所以其实无论幕后班底，甚至乎幕前，包括Karen（莫文蔚）﹑Kay（谢安琪）或者周国贤，甚至乎我自己，其实都系喺耿耿于怀呢个世界，去探索佢身边所有事情，我自己好开心及感激大家好喜欢呢个故事。”

至于同人妻Kay合唱《罗生门》，Juno就话系呢个故事一个里程碑，佢话：“我同阿Y觉得我哋好想将‘十年嘅男仔’呢个角色，将佢完全摧毁，将我哋一手建立嘅，去完全摧毁佢，其实有呢个能力摧毁呢个角色，我相信世界上得两个人，一个系我﹑一个系黄伟文，所以我哋由第一日去倾呢个故事，我好想写一个‘罗生门’咁样嘅歌，我好想听多啲呢个女仔睇法，我觉得Kay唱得好好，Karen喺《瑕疵》都系，佢哋演活咗我幻想呢个世界嘅一种角色，虽然制作过程唔算好长，冇拍电影咁长，但系艰辛，因为你谂到呢个故事，我同阿Y去倾，好似捉棋咁，将每一个幕前幕后团队去做埋一齐，我系好多谢佢哋信任，当然佢哋每一个都系我心目中男女主角，因为佢哋担当紧好重要角色。”

Juno表示：“我同阿Y（Wyman）创作过程，我哋好想好现实地讲一段或几段关系，而一个连贯性好强﹑故事性好强嘅方向，呢样嘢好吸引到我，结果就出现《耿耿于怀》，直至十年后嘅《念念不忘》﹑到《瑕疵》﹑到今日《罗生门》，大家有种感情想追看角色发展，但我哋从来唔想去写…即系呢个唔系童话故事，但当中存在咗好多人生小道理，亦都有佢嘅甜蜜时候，对我呢讲呢件事几浪漫，但一种遗憾美嘅浪漫，所以我其实最要多谢阿Y，我仲好记得有次通电话，我哋好似好雀跃嘅小朋友，对呢个故事发展好有兴趣，好多谢大家钟意呢个故事。”

Juno续说：“我谂去做呢只碟，喺我心目中有个大前提，呢个大前提系其实有边个未曾念念不忘过？咁呢个就系‘人’囉，我觉得呢个系人可爱﹑有趣﹑但系又好复杂嘅地方。”

Juno又话做呢只碟同去拍一部电影都好相近：“我哋由第一日开始已构思故事架构及里面人物，佢哋对

1.加高
问题：扩展性不好

2.父级浮动
问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）

3.inline-block 清浮动方法：

问题：margin左右自动失效；

4.空标签清浮动
问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）

清浮动方法

5.br清浮动
问题：不符合工作中：结构、样式、行为，三者分离的要求。

6.after伪类 清浮动方法（现在主流方法）
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}

after伪类： 元素内部末尾添加内容；

    :after{content"添加的内容";} IE6，7下不兼容

zoom 缩放

    a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
    b、FF 不支持；

7.overflow:hidden 清浮动方法；

问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；

overflow: scroll | auto | hidden；

overflow:hidden;溢出隐藏（裁刀！）

IE6双边距BUG（IE6下块属性标签浮动，并且有横向margin，横向margin加倍。）：

a、IE6
b、浮动
c、横向margin
d、块属性标签（加display:inline;）

IE6下 li部分兼容性问题：

a、左右两列布局，右边右浮动IE6 IE7下折行；(左边元素浮动)
b、IE6 IE7  li  下元素都浮动 在IE6 IE7下 li 下方会产生4px间隙问题；（加vertical-align:top；）

vertical-align 垂直对齐方式
a、加垂直对齐方式的同排元素都要加垂直对齐方式；
b、垂直对齐方式可以解决元素下方间隙问题；

图片下方间隙问题

a、display:block; (改变标签本身特性)
b、overflow:hidden; (必须知道图片高度)
d、vertical-align (暂时最完美的方案)

position:relative; 相对定位

    a、不影响元素本身的特性；

b、不使元素脱离文档流；
c、如果没有定位偏移量，对元素本身没有任何影响；

定位元素位置控制

    top/right/bottom/left  定位元素偏移量。

position:absolute; 绝对定位
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；
e、相对定位一般都是配合绝对定位元素使用；

z-index:[number]； 定位层级

    a、定位元素默认后者层级高于前者；

遮罩弹窗（优酷弹窗）
标准 不透明度： opacity:0~1;
IE 滤镜： filter:alpha(opacity=0~100);

position:fixed； 固定定位

与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位；

定位其他值：

position:static ； 默认值
position:inherit ;  从父元素继承定位属性的值

position:relative | absolute | fixed | static | inherit;

position:relative;

在 IE6 下父级的 overflow:hidden; 包不住子级的relative;

position:absolute;

在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。

position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法；

position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）

表格标签：

table 表格
thead 表格头
tbody 表格主体
tfoot 表格尾
tr 表格行
th 元素定义表头
td 元素定义表格单元

表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充

form 表单
<input type="…… " name="" value="" />
text 文本框
password 密码
radio 单选
checkbox 复选
submit 提交
reset 重置
button 按钮
image 图片
file 上传
hidden 隐藏

select/option 下拉选框

对高度的支持不兼容；

textarea 文本域

各个浏览器下的默认滚动条显示不兼容
css3新增 resize 调整尺寸属性；

outline 轮廓线；
A标签轮廓线去除方法：
1、……
2、……

表单元素兼容性问题

IE6下input背景滚动；

\9 所有的IE9及之前
+ * IE7及ie7的ie浏览器认识    
_IE6及ie6的ie浏览器认识

<!--[if IE]>
这是IE 
<![endif]-->

<!--[if IE 9]>
9
<![endif]-->
…………………………
<!--[if IE 6]>
6
<![endif]-->

// 單個支持 顯示 #ffff00
.className{color:#ffff00!important}
.className{color:green;}

//多個不支持，顯示green
.className{color:#ffff00!important color:green}

data uri 圖片
http://dancewithnet.com/lab/2009/data-uri-mhtml/create/1376100722.php

flash透明<param name="wmode" value="transparent"> wmode="transparent"

box-sizing 盒模型解析模式
Content-box  标准盒模型 width/height=border+padding+content
Border-box 怪异盒模型 width/height=content

IE8支持

 -webkit-box-sizing: border-box; 
 -o-box-sizing: border-box; 
 -ms-box-sizing: border-box; 
 box-sizing: border-box;

解決form元素兼容性，IE7不支持，所以需要加hack *

 margin: 0;
 padding: 0;
 border-width: 1px;
 height: 17px;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
 
 *height:15px; 
 *width: 15px;

css模拟固定定位
expression(eval(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight)/2));

未知宽高的img居中问题

li的里分为左右两块元素，右边元素一直跟在左侧内容后边并距离左侧元素10px间距，左侧元素宽度由左侧内容撑开。如果左右两侧内容总宽度超出了li宽度，就把左侧多出的文字隐藏掉

css模擬fixed定位一

css模擬fixed定位二