作者： Goofy

【转】【全部整理】Love Plus攻略（更新中）

由Goofy发布在ACG、Nintendo在 【转】【全部整理】Love Plus攻略（更新中）上留下评论
！！！

 

情话
我喜欢你sukida           【苏key大】
我爱你 aishiteru          【阿姨洗铁路】
最喜欢你 daisuki 【戴苏ki】
喜欢 suki 【苏KI】

服饰
水手服     seeraafuku   【塞A拉服酷】
和服       kimono          【key摸No】
浴衣       yukata            【油卡他】
巫女服     mikofuku         【米抠服酷】
护士服     naasufuku        【那啊苏服酷】
女仆装     meidofuku         【妹斗服酷】
哥特萝莉装 gosurorifuku     【狗苏楼丽服酷】
兔女郎     baniigaaru            【帮你一咖路】
泳装       mizugi                  【米租寄】
内衣       shitagi         【洗他鸡】
萝莉装 amarori【阿玛萝莉】
便服 gajiaru 【嘎加路】
性感装 sexy
体操服 taisofuku 【太搜服库】
可爱类 kawaii 【卡哇伊】
cosplay 英文同。。。。
整洁的 seiso 【塞搜】
校服泳装 ONE PIECE 【海贼王？？？？】
无袖衣服 no sleeve
牛仔裤 jinzu 【金族】
织物 cut sewn

食物
炸肉饼 hanbaagu 【韩恩八啊古】
寿司    sushi         【苏戏】
天妇罗 tenppura    【天恩】
糕    keiki                【K-key】
关东煮 oden            【欧待恩】
荞麦面 soba             【搜吧】
红豆饼 anpan            【啊恩趴恩】
团子    dango             【蛋够】
草莓大福ichigodaifuku   【一起够 大一福库】
草莓 ichigo 【一起够】
咖喱 kare 【卡里】
汉堡包 hamburger 【憨八嘎】
薯片 potechi 【破特奇】
布丁 purin 【普林】
拉面 ramen 汉日同音
乌冬面 udou 【武斗】
蛋糕 cake
日餐 wasyoku 【哇搜酷】
西餐 yousuoku 【哟搜酷】
润喉糖 nodoame 【NO豆阿米】
饭团 onigiri 【哦尼基里】

电影
动作 action
动画 anime
科幻 SF
恐怖 horror
浪漫 love romance
戏剧 comedy
恋爱 renai 【冷爱】
幻想 fantasy
悬疑 suspense
神秘 mystery
特设片 tossastu 【头撒粗】
动物 doubutsu 【豆不粗】

演艺形式
演唱会 concert
足球 soccers
歌剧 musical
现场会 live
戏剧 engeki 【嗯个ki】
落语（日本说书） rakugo 【拉哭够】
展示会 tenjikai 【腾机开】

1.对女方的称呼：开启称呼需要奖章，2星和5星分别开启一部分，并要求微笑脸状态以上，称呼不一一列出。
7星之后开启的特殊称呼，同时 要求大笑脸状态并满足以下：
マナカ姫/マナ姫：(爱花专用)无特别
リンさま/リンコ姫：(凛子专用)无特别
お姉さま/姉さま： (宁宁专用)无特别
ジュリエット(朱丽叶)：(爱花专用)做过“罗密欧与朱丽叶”的梦
リンタロウ(凛太郎)：(凛子专用)做过“巨大机器 人”的梦
先生：(宁宁专用)做过“女教师”的梦
姫：约会去游园地的ナイトパレード(旋转木马？)3次
ハニー(honey)：约会 去映画馆看恋爱电影3次
女王様：约会去ライブハウス(livehouse)听ロック(rock摇滚乐)3次
ご主人様：去电器街メイド店遇 到她3次

此外还有一些称呼是绝对不会被通过的
爱花：お娘、お娘様、坚物、王女様、高岭様、マナ様、タカマア、お姫様、真面目ちゃ ん
凛子：少年、チビ、ガキ、小学生、ばっちゃん、小僧、ボウズ、コバりん、ヒヨっ子
宁宁：おばさん、おばちゃん、姐さん、姐御、女王、ア ネガー、アネネネ、ネエやん、お母さん(-_-b)

2.女方对自己的称呼(3星以上是基本条件)：
キミ：无特别
ダーリ ン：无特别
おまえ：映画馆约会，看アクション(Action动作类)电影2次
先辈：在学校kiss成功20次(最后出现亲吻动画算成功1 次)
おとうと君：勉强会换装10次
おにいちゃん：勉强会kiss成功10次
だんな様：去电器街メイド店30次
ご主人様： 去电器街メイド店50次

恋人模式中，约会时可以选的地点必须是Lv.1或以上等级。部分最初是Lv.0的地点，必须提升等级后才能

在约会时选择。

提升约会地点等级的方法就是，在预定日程时，选外出选项，然后去约会地点踩点即可，通过踩点的

效果（花丸＞◎＞○＞△＞×）会提升约会地点的经验值，到达一定程度就会升级。

通过提升约会地点等级，还会出现新的约会地点。因为每个月去特定3个地方（在web第4项月刊スタ

ンプラリー里可以查看）约会后得到印花，集满3个好像会有什么奖励（我收集过一次，得到了新的短信

铃声，爱花的声音“メールだよ”），所以赶紧把约会地点全部踩出来是有意义的。

十羽野神社【快餐店LV2或喷泉公园LV3】
とわのボウル【电影院LV1或快餐店LV2】
拉面屋【咖啡厅LV1或卡拉OK LV3】
ライブハウス【拉面屋LV1或卡拉OK LV2】
和食甘味屋【植物园LV1或泳池LV1】
室内泳池【和食甘味屋LV1或游乐园LV1】
天文馆【室内泳池LV2或植物园LV3或游乐园LV3】

餐厅【商场LV1或海湾大桥LV1】
海湾大桥【水族馆LV2】
海滩【水族馆LV1或活动大厅LV2】
湖边餐厅【山上动物园LV2或十羽野湖LV1】
十羽野湖【天羽山LV1】
天羽山【美术馆LV1

各约会地点一览与能力值影响（外出专用约会不可的地点不包括在内）

新とわの駅周辺

映画館（电影院） 感性升 运动降
ファミレス（家庭餐厅） 知识升 魅力降
噴水公園（喷水池公园） 感性升 运动降
ファーストフード（快餐店） 知识升 魅力降

とわの坂上駅周辺

植物園（植物园） 知识升 魅力降
遊園地（游乐场） 运动升 知识降
室内プール（室内游泳池） 运动升 知识降

十羽野駅周辺

コーヒーショップ（咖啡店） 知识升 运动降
ラーメン屋（拉面馆） 知识升 魅力降
カラオケ（KTV） 感性升 运动降

奥十羽野駅周辺

山の上動物園（山上动物园） 知识升 魅力降
山の上美術館（山上美术馆） 感性升 运动降
天羽山 运动升 感性降
十羽野湖 感性升 魅力降

臨海駅周辺

ショッピングモール（商店街） 感性升 知识降
レストラン（餐厅） 魅力升 知识降
港の丘公園（港丘公园） 运动升 知识降
とわの水族館（水族馆） 魅力升 运动降

海水浴場 运动升 知识降

イベントホール（集会会馆） 感性升 运动降

关于女主人公性格的改变
每位女主人公都拥有3种不同的性格，可以通过左屏幕上方的type那条的颜色来确认目前女主人公的性格

。

示例：
========
人物
========
颜色（TYPE那个条的颜色）
简介
【告白前】《=【注意不是告白后】的变更方法
========

========
愛花
========
蓝色
洁癖，认真，不爱说话，好胜
默认
—————
黄色（有点发红，可能有人会分不清，就是宁宁默认的颜色）
坦率、温顺，有点消极，更有女孩子的味道
碰巧遇到了打招呼：选第二个方式打招呼
—————
粉色（有点发红？）
老实开朗，积极的
打招呼的时候，选【膝カックン】／【チョップ】一类的（敲她，敲她脑袋，那个木头脑袋，让你每天那

么早回家）
========

========
凛子
========
蓝色
不爱说话（长门大萌神一式）
默认
—————
绿色
有点要强对,恋爱不坦率，说话口气也很强硬（最典型的傲娇性格）（敖娇一式）
碰巧遇到了打招呼：选第二个方式打招呼
—————
粉色（有点发红？）
态度软化，开朗
打招呼的时候，选【膝カックン】／【チョップ】一类的（敲她，我就是比你狠，让你狂）
=========

=========
寧々
=========
橙色
冷静,态度温顺，像个大人
默认
—————
绿色
更加主动，经常会戏弄欺负下你，好胜
碰巧遇到了打招呼：选第二个方式打招呼
—————
粉色
态度积极，会把你当成小孩子一样娇纵（典型的御姐）
打招呼的时候，选【膝カックン】／【チョップ】一类的
—————

+++++++++++++++++++++
+++++++++++++++++++++

告白后
问你的话，不管是聊天还是短信，照着自己想要的选就是了

+++++++++++++++++++++

不管前后，不保证选一次就变，和学习/运动/感性/魅力的长度等，还有累计此类问题的回答有关，可能

连续选同一个性格3到4次才可变更。

那么，如何改变女主人公们的性格呢？
首先，在每次遇见女主人公要让你选择打招呼方式时，第一项对应的就是默认性格，第二项对应的是第二种性格，第三项对应的就是第三种性格。均衡地选择这三种打招呼方式，那么在和女主人公的关系好了之后（开始约会后），会出现在放学一起回家时，让你选择是否改变性格的选择，女主人公会问你「好きな人はどんなタイプ？」（你喜欢的女孩子是什么类型的？），这时有3个回答，选择「宁々/爱花/凛子だよ」的选项的话就是维持默认性格，而选择另外两项则对应另外两种性格。

不同的性格，平时说话口气会不同，告白方式也会不同。这样更加增加了游戏的可玩性，游戏可以选择的女主角相当于有9个了。

有人觉得真实时间受到行动点限制，SKIP模式又没有剧情，其实。。

是有个技巧的，先在真实时间模式下做好安排或者约会预订，然后在SKIP模式下去各个约会地点踩点

或者学习，两边数值是共通的哦，而且一天的行动是不会受到真实时间模式的限制，踩好的点在真实时间

模式下照样有经验值。

所以，要学习和踩点，就到SKIP模式，然后在各个时间点到点之前回到真实时间模式就好了

时间点：

中午12点：清晨到中午12点（清晨的活动）

下午3点：中午12点到下午三点（上午的活动）

下午6点：下午三点到晚上6点（下午的活动）

晚上：晚上6点后（夜生活。。。）

时间点是清晨 上午 下午 晚上的分割点（实际上和真实时间还是有一定的区别），在真实时间模式

下，只要下一个时间段尚未来到，就可以随意安排或取消活动，而一旦进入了时间段，则活动开始，不能

取消或更改

比如清晨安排了体育运动，那么到12点之前都不能做出更改，而上午、下午、晚上的活动都还能更改

，如果上午安排了理工学习，到了中午12点后，就自动进入理工学习，直到下午3点不能更改，所以如果

想要更改，最好在时间点到来前，从SKIP模式切换回真实时间模式。

追加：不过要注意的是，SKIP里面，如果有了约会的日程，但是还没到日曜日就记录退出的话，这个

约会就会放鸽子，女友会不高兴

不过。。。。SKIP模式下。。。凛子常常要KISS（其实是主角自动要求，发动条件不明，似乎和笑脸

有关，每天都要KISS个两三次）。。。

由于睁眼时候的kiss种类比较多，什么弯着眉毛，直着眉毛，眼睛湿润，很搞啊，又容易出错，

所以大家可以在她睁眼的时候憋着，等她换表情，换到那些简单的表情就好了，多耐心等等，可以保

证每次都高评价kiss哦

在之前抚摸过程中积蓄的粉心的数量=kiss的回数。
可以kiss的部位有四处：额头、脸颊、唇边、唇。
需要根据女友的不同动作，来亲吻不同的部位。
1)头部朝下：亲吻额头
2)头部偏转：亲吻脸颊
3)正面闭眼：亲吻嘴唇（最多出5颗心后松开）
4)正面睁眼，眼睛湿润：亲吻嘴唇（出7颗心后松开）
5)正面睁眼，眉毛是直线（￣ ￣）：亲吻唇边（左右都可）
6)正面睁眼，眉毛曲线：亲吻嘴唇（可能）

 

 

 

英语
英翻中 A little bird told me that…
A.听说XXXX
英翻中 ever after
A.自那以后
英翻中apple of discord
A。争端
日翻英「よくやった！」
A。Just you dare!
日翻英。「予约する」
A，book
日翻英。「引退する」
A.get straight
日翻英。「恋に落ちる」
A.become love struck
英翻中。came to a head
A.恋爱的果实（未知，可能不是这个，日文原文是恋が実る）

「It rains cats and dogs」

A.瓢泼大雨

世界史
享保改革后，江户幕府谁是将军？
答：徳川吉宗
清朝没收鸦片的。。。
答：林则徐
独立宣言起草者
答：杰弗逊
哥伦布1492年到达的岛
答：圣萨尔瓦多
「丑三つ」的意思
答：凌晨2时
1075年，教皇格列高利七世XXXXX….（囧）
答：卡内萨之辱
织田信长长条之战打败的大名
答：武田胜頼
百年战争后开始的英国内乱
答：玫瑰战争
镰仓幕府第三代执政XXXX。。。
答：北条泰时
1881年谁建立了自由党？
答：板垣退助

日本神话里出现的兔子
因幡兔（因幡腹黑兔/）

日语
「拙い」
A.つたない 笨拙
「唆す」
A.そそのかす 诱惑
「威仪」汉字片假名
A.イギを正す。 中文未知。。。
古日语「乳母」
A.めのと 中文未知
「じくじたる思い」
A. 耻ずかしい思い 思想是害羞的(大致意思)
「あられもない」
A.ふさわしくない 不当
「未申（ひつじさる）」
A.南西 西南

古日语「時鳥」

Aほととぎす 杜鹃

「丁寧な対応にカンシンする」

A. 感心 印象深刻

理化
桥上石头1秒落入水中，桥高
A.4.9M
4安100伏电接通电热器，多少功率
A.400W
DNA构成物质
A.脱氧核糖
什么是最轻的气体
A。氢
动物特有的细胞器
A：中心体
蛋清里加醋
A：变硬
什么情况下副交感神经会兴奋
A.胃肠蠕动
投掷2枚硬币的那个问题（实在翻译不出了）
A.三分之一

数学
2x-9=3
A.X=6
足球队问题
A.99
5KM走10MIN，车速
A.30KM/h
正十二边形内角和
A.1800度
某个钟1小时慢3分钟。将这个钟拨到0点。当这个钟指向19点的时候，它晚了几分钟呢。
A.60

「-6+32÷（-8）」

A.-10

5x+3=-12

A.-3

A B 得点差

A.12

女主角关联

交往开始之日

A.翻日历去！

喜欢动物

A.MA=兔子 RIN=猫 NE=狸猫

血型

A,NE=O MA=A RIN=B

生日

A,NE=4 20 MA=10 5 RIN=8 17

MA喜好食物
Ａ．芋 山芋(土豆马铃薯）

备胎的自我修养

由Goofy发布在其他、周报在 备胎的自我修养上留下评论

《备胎的自我修养》

1、请不要侮辱正胎，因为他也许和你一样深爱着她，只是在你之前而已，就算是对手也请尊重他，因为在你之前他帮你照顾她很久了。

2、如果她埋怨正胎，请不要跟着数落他，这样显得你很虚伪，我们都知道，有时只是女孩子自己无理取闹，等她清醒了，她自己会发现自己的错，如果你当时附和她，只会让她觉得你是个跟屁虫，而不是真心为她好。

3、也请不要在她无理取闹的时候当面说她，你只需要微笑的听着，有时她只是想找个人诉说一下，并一定是内心真的这样想的。在她平静过后，再旁敲侧击的提醒她。

4、永远记得，你不是她的谁谁谁，有些事轮不到你来管，不要过多的干涉她的生活。你只需要好好照顾她，让她开心，在她孤独的时候陪她说话等等。一句话，你可以让她感觉到你的存在，但是别让这种存在变为束缚和责任。

5、永远不要逼她做2选1的决定，当她最终选择好了，她会让你知道的。如果最终不是你，也请祝福她，她做了她认为是幸福的选择，就算以后会后悔，至少她现在是幸福的…

6、不要问她对你有没有感觉，暧昧也罢、备胎也罢，她如果对你没感情，会让你这么做么？

7、女人有时是很矛盾的生物，请体谅这点。

8、原谅她们的善变，不要像个什么都不懂的小孩子老是问她为什么，你只需要按照她说的做就行了。

9、千万别帮她做决定，就算她让你帮她做决定也是，你只能提意见、建议、参考，请她自己决定，如果她拿不定主意，请让她问正胎。你还没参与她未来的资格，还负担不起她人生的责任。

10、请与她保持距离，就算你心里再想她、再想跟她说话，也请克制自己，她有正胎，要分清楚正和备的区别，也许她现在正是很快乐、很幸福的时候，你舍得用自己的寂寞去打扰她么？所以不要有事没事就打扰她，请等待她主动联系你。

11、在她联系你的时候请保证自己是她的首要目标。

12、当她联系你的时候，请立刻换上阳光的心情，不要去想为什么她现在才联系你，刚才我有多想她等等，要让她感觉和你联系是一件很愉快的事情，不要跟她说自己刚才寂寞的滋味，要让她知道没有她你也能过得很好。男人要耐得住寂寞。。

13、不要去想她与正胎有多好，也不要去想她有多少个备胎，更不要看到她与某人联系就醋意大发，要吃醋也轮不到你。

14、专注做好你自己的事，你的目标是获得她的芳心，而不是要和谁竞争。正胎和其他备胎只不过是反抗真理的声音，她是你们唯一的裁判。

15、在她还没有宣布谁获胜之前永不放弃，你可以很长一段时间不和她联系，但是当她需要你时请及时的站出来。

16、只要还没结婚，都是有机会的。

17、结了婚就请不要再纠缠了。她已经做了选择，结婚之前没选择你，结了婚过后更不可能抛开一切再选择你。放开她，还有更好的人等着你。

18、保持身心愉悦和激情，比的既是耐力也是激情。

页面文本混排问题

由Goofy发布在Html、前端开发在 页面文本混排问题上留下评论

纯汉字文本与纯英文文本还有汉英混排(其实是全角字符与半角字符的区别)在IE浏览器中是有区别的。

带半角字符的区域会比纯全角文本区域高度下沉一块，这个在布局的时候要特别地关注一下。所以你在页面看到文本块与块之间水平不齐，可以看看是不是因为该问题引起的。

 

自动换行 word-break:break-all和word-wrap:break-word 的区别

由Goofy发布在CSS、前端开发在 自动换行 word-break:break-all和word-wrap:break-word 的区别上留下评论
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于：

1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。

2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

3，word-break;break-all 支持版本：IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。 WORD-WRAP:break-word 支持版本：IE5.5以上 内容将在边界内换行。如果需要，词内换行( word-break )也将发生。表格自动换行，避免撑开。 word-break : normal | break-all | keep-all 参数： normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行 break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本 语法： word-wrap : normal | break-word 参数： normal : 允许内容顶开指定的容器边界 break-word : 内容将在边界内换行。如果需要，词内换行（word-break）也行发生说明：设置或检索当当前行超过指定容器的边界时是否断开转行。

对应的脚本特性为wordWrap。请参阅我编写的其他书目。 语法： table-layout : auto | fixed 参数： auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢 fixed : 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关说明：设置或检索表格的布局算法。对应的脚本特性为tableLayout。

建议：word-break 用3C检测会显示问题的，导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替，这样在FireFox和IE下就都能正确换行，而且要注意，单词间的空格不能用 来代替，不然不能正确换行。

我在网站上试验过确实不支持，你可以再W3C验证一下

javascript的window.onload与jquery的$(document).ready()

由Goofy发布在JavaScript、交互效率、前端开发在 javascript的window.onload与jquery的$(document).ready()上留下评论

 

以 浏览器装载文档为例，在页面加载完毕后，浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中，通常使用 window.onload 方法，而在 Jquery 中，使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数，可以极大的提高 Web 应用程序的速度。

onload

window.load  $(document).ready()

执行时机  必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行  网页中所有 DOM 结构绘制完毕后就执行，可以能 DOM 元素关联的内容并没有加载完
编写个数  不能同时编写多个
以下代码无法正确执行：
window.onload = function(){
alert(“text1”);
};
window.onload = function(){
alert(“text2”);
};
结果只输出第二个  能同时编写多个
以下代码正确执行：
$(document).ready(function(){
alert(“Hello World”);
});
$(document).ready(function(){
alert(“Hello again”);
});
结果两次都输出
简化写法  无  $(function(){
// do something
});

另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 —load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。
Jquery 代码如下：
$(window).load(function (){
// 编写代码
});等价于 JavaScript 中的以下代码
Window.onload = function (){
// 编写代码
}

——————————————————————————————

最近在改一个嵌入在frame中的页面的时候，使用了jquery做效果，而页面本身也绑定了onload事件。改完后，Firefox下测试正常流畅，IE下就要等个十几秒jquery的效果才出现，黄花菜都凉了。

起初以为是和本身onload加载的方法冲突。网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行，而onload事件是在所有资源都准备完成之后才执行，也就是说$(document).ready()是要在onload之前执行的，尤其当页面图片较大较多的时候，这个时间差可能更大。可是我这页面分明是图片都显示出来十几秒了，还不见jquery的效果出来。

删了onload加载的方法试试，结果还是一样，看来没有必要把原本的onload事件绑定也改用$(document).ready()来写。那是什么原因使得Firefox正常而IE就能呢？接着调试，发现IE下原来绑定的onload方法竟然先于$(document).ready()的内容执行，而Firefox则是先执行$(document).ready()的内容，再执行原来的onload方法。这个和网上的说法似乎不完全一致啊，呵呵，有点意思，好像越来越接近真相了。

翻翻jquery的源码看看$(document).ready()是如何实现的吧：

复制代码 代码如下:
if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {
document.documentElement.doScroll(“left”);
} catch( error ) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
jQuery.event.add( window, “load”, jQuery.ready );

结果很明了了，IE只有在页面不是嵌入frame中的情况下才和Firefox等一样，先执行$(document).ready()的内容，再执行原来的onload方法。对于嵌入frame中的页面，也只是绑定在load事件上执行，所以自然是在原来的onload绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源，那十几秒的延迟正是它放大出的时间差。

去除触发链接时出现的虚线框

由Goofy发布在Html、交互效率、前端开发在 去除触发链接时出现的虚线框上留下评论

链接在被点击时会出现虚线框，即使松开了也仍然存在，在有的时候显得不美观。既然不好看，那就不要它。怎样去掉呢？

方法一 IE下可使用其私有的html属性：hideFoucs，在标签的结构中加入hidefocus=”true”属性。即：

<a href=”http://www.17css.com” hidefocus=”true” title=”17css-青色’s Blog”>17css-青色’s Blog</a>

而在 Firfox 浏览器中则相对比较容易，直接给标签 a 定义样式 outline:none; 就可以了，即：

.HideFocus { outline:none; }

方法二 也可以使用CSS expression来控制，但不推荐使用，毕竟expression在性能上有问题。

.HideFocus {
hide-focus:expression(this.hideFocus=true);  /* for ie 5+ */
outline:none;  /* for firefox 1.5 + */
}

除链接外，该CSS同样适用于input和button标签。

方法三 将以下代码保存为link.htc文件：

<public:attach event=”onfocus” onevent=”hscfsy()”/>
<script type=”text/javascript”>
function hscfsy(){ this.blur(); }
</script>

链接样式中加入：

a { behavior:url(link.htc); }

IE中已经没有问题，但是在FF中虚线框依然存在。再增加一条样式定义来解决此问题：

a:focus { outline:0; }

这样IE、FF中虚线都不存在了。

覆盖select，使之不可操作

由Goofy发布在CSS、Html、交互效率、前端开发在 覆盖select，使之不可操作上留下评论

自定义的层给select遮挡住是一个老问题了，不过可喜的是ie7和ff都已经支持select的zIndex，只要给层设定高的zIndex就能覆盖select了，可惜对于ie6这个问题还是需要解决。

覆盖select据我所知有两个比较好的方法：

1，显示层时，先隐藏select，关闭层时再重新显示；

2，用一个iframe作为层的底，来遮住select。

方法1应该都明白，方法2就是利用iframe可以覆盖select的特性，只要把一个iframe作为层的底部就可以覆盖下面的select了，程序中是这样使用的：this.Lay.innerHTML = ‘<iframe style=”position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);”></iframe>’可以看出这个透明的iframe也以同样覆盖整个页面，如果是有内容显示的页面最好设置z-index:-1;确保iframe在层的底部。个人觉得使用方法2比较好，但始终是改变了页面结构，有时会比较难控制，至于方法1就比较容易方便。

修正IE6不支持position:fixed的问题

由Goofy发布在JavaScript、前端开发在 修正IE6不支持position:fixed的问题上留下评论

众所周知IE6不支持position:fixed，这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己的博客模板的时候，遇到了这个问题。当时就简单的无视了IE6——尽管有几个使用IE6的朋友，一起BS我……但是对于大项目或商业网站，如果有用到这个属性的时候，是不可能直接无视的。

你是如何让position:fixed在IE6中工作的？

本文所使用的技巧是用了一条Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式，因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval包裹你的语句。

如何解决“振动”的问题？

显然IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候，它将重置所有内容并重画页面，这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug，在此处固定位置的元素需要调整以跟上你的(页面的)滚动，于是就会“跳动”。

解决此问题的技巧就是使用background-attachment:fixed为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS，它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素！

这个方案并不是我提供的。我是在网上的某个地方读到这些的。如果你知道是谁原创了这个方法，请告诉前端观察。

我发现的另外一个小技巧是，你根本无需一个真实的图片！你可以使用一个about:blank替代一个spacer.gif图片，而且它工作的同样出色。

CSS Code123456789101112/*让position:fixed在IE6下可用! */

.fixed-top/* 头部固定 */{position:fixed;bottom:auto;top:0px;}

.fixed-bottom/* 底部固定 */{position:fixed;bottom:0px;top:auto;}

.fixed-left/* 左侧固定 */{position:fixed;right:auto;left:0px;}

.fixed-right/* 右侧固定 */{position:fixed;right:0px;left:auto;}/* 上面的是除了IE6的主流浏览器通用的方法 */

* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}

* html .fixed-top/* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}

* html .fixed-right/* IE6 右侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}

* html .fixed-bottom/* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}

* html .fixed-left/* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}

 

【转】使IE6下PNG背景透明的七种方法任你选

由Goofy发布在CSS、JavaScript、UI相关、前端开发在 【转】使IE6下PNG背景透明的七种方法任你选上留下评论

PNG图像格式介绍：

PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可 存储多到16位的α通道数据。

IE6下PNG背景透明的显示问题

PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多，目前，最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明，会显示一个灰色的框。

IE6下PNG背景透明的解决办法

.pngImg { background:url(image.png); _background:url(image.gif);}
注意上文的_号，目前IE7,8以及Firefox浏览器等都不支持此CSS语法，只有IE6识别。因此，其他浏览器会调用PNG，而IE6刚调用GIF。

二.滤镜filter解决IE6下背景灰

background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”a.png” ,sizingMethod=”crop”);
上面的原理是其他调用PNG，IE6,则先设背景没有，然后调用滤镜使之显示PNG图片。

缺陷：IE6下背景无法平铺，这个问题很严重。同时在性能上也有小问题，页面中次数不是很多的时候该办法还是可行的。

AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative;这样条代码，使其相对浮动。AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。

解决IE下的链接无效可用最后面的方法：

三.利用JS解决html中的img(插入在网页中的png图像)png背景灰问题

页面中插入一段js即可。原理同上，只是将img标签用<span>标签替换掉，并且通过滤镜设置该<span>标签的background。它会将所有插入的PNG都如此处理。
<!–[if IE 6]>
<script>
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i];
var imgName = img.src.toUpperCase();
if (imgName.substring(imgName.length-3, imgName.length) == “PNG”)
{
var imgID = (img.id) ? “id='” + img.id + “‘ ” : “”;
var imgClass = (img.className) ? “class='” + img.className + “‘ ” : “”;
var imgTitle = (img.title) ? “title='” + img.title + “‘ ” : “title='” + img.alt + “‘ “;
var imgStyle = “display:inline-block;” + img.style.cssText;
if (img.align == “left”) imgStyle = “float:left;” + imgStyle;
if (img.align == “right”) imgStyle = “float:right;” + imgStyle;
if (img.parentElement.href) imgStyle = “cursor:hand;” + imgStyle;
var strNewHTML = “<span “+ imgID + imgClass + imgTitle + “style=”” + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
+ “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader” + “(src='” + img.src + “‘, sizingMethod=’scale’);”></span>”;
img.outerHTML = strNewHTML;
i = i-1;
}
}
}
window.attachEvent(“onload”, correctPNG);
</script>
<![endif]–> ​

四.调用iepngfix.htc解决IE6PNG背景灰及拉伸问题

此方法来自：http://www.twinhelix.com/css/iepngfix/ 此方法基于Winodws平台，在Linux下不支持htc,没有验证过，但有网友发文证实。

以下片段添加至css文件

<div class=”pngImg”>PNG背景图片</div> <img src=”png图片” class=”pngImg” alt=””>
详细的应用方法这里就不介绍啦。

在逼不得已且身不由己必须使用PNG的情况下，这种方法应该是比较优秀的，虽然不能完美的解决IE6的平铺，但是至少是实现了拉伸，使得很多情况下可以代替平铺来使用。当然效率的问题任然是存在

五.让“块”透明的方法

.div { FILTER: alpha(opacity=20); moz-opacity: 0.2; opacity: 0.2;}
测试IE6,IE7,IE8,FF2,FF3均通过。提示：IE6,IE7需设置一个宽度(100%也行)，否则看不到效果。

六.DD_belatedPNG,解决IE6不支持PNG绝佳方案

整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与 background-repeat.

而我今天介绍DD_belatedPNG,只需要一个理由,就是它支持backgrond-position与background-repeat.这是其他js插件不具备的.同时DD_belatedPNG还支持a:hover属性,以及<img>.

看Demo: http://www.ediyang.com/demo/DD_Png/

原理
这个js插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的js插件用的是AlphaImageLoader滤镜.

使用方法
1.在这里下载DD_belatedPNG.js文件.
http://dillerdesign.com/experiment/DD_belatedPNG/#download

2.在网页中引用,如下:
<!–[if IE 6]>
<script src=”DD_belatedPNG.js” mce_src=”DD_belatedPNG.js”></script>
<script type=”text/javascript”>     /* EXAMPLE */   DD_belatedPNG.fix(‘.png_bg’);   /* 将 .png_bg 改成你应用了透明PNG的CSS选择器,例如我例子中的’.trans’*/   </script> <![endif]–>
3.有2种调用函数,一种是DD_belatedPNG.fix(),如上代码.另一种是fix(),这中方法需要在函数内指出css选择器名.
使用a:hover请留意
5-25 更新:如果你也像jutoy同学一样想要用透明PNG作为a:hover时的背景图片,那么你需要留意你的代码,需要以”a:hover”来作为选择器. 否则可能会导致无法成功.同时我也更新了demo,请需要的更新查看.接着我们看看正确的代码:
<!–[if IE 6]>
<script type=”text/javascript” src=”js/DD_belatedPNG.js” ></script>
<script type=”text/javascript”>   DD_belatedPNG.fix(‘.trans,.box a:hover’);   </script>
<![endif]–>
七.通过 javascript 和 css 滤镜解决 IE 整站 png 背景透明问题
<script type=”text/javascript” language=”javascript”>
function enablePngImages()
{ var imgArr = document.getElementsByTagName(“IMG”);
for(i=0; i<imgArr.length; i++){
if(imgArr[i].src.toLowerCase().lastIndexOf(“.png”) != -1)
{
imgArr[i].style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='” + imgArr[i].src + “‘, sizingMethod=’auto’)”;
imgArr[i].src = “spacer.gif”;
}
if(imgArr[i].currentStyle.backgroundImage.lastIndexOf(“.png”) != -1)
{
var img = imgArr[i].currentStyle.backgroundImage.substring(5,imgArr[i].currentStyle.backgroundImage.length-2);
imgArr[i].style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+img+”‘, sizingMethod=’crop’)”;
imgArr[i].style.backgroundImage = “url(spacer.gif)”;
}
}
}
function enableBgPngImages(bgElements)
{
for(i=0; i<bgElements.length; i++)
{
if(bgElements[i].currentStyle.backgroundImage.lastIndexOf(“.png”) != -1)
{     //alert(bgElements[i]);
var img = bgElements[i].currentStyle.backgroundImage.substring(5,bgElements[i].currentStyle.backgroundImage.length-2);
bgElements[i].style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+img+”‘, sizingMethod=’crop’)”;
bgElements[i].style.backgroundImage = “url(spacer.gif)”;
}
}
}
</script>
<img src=”pngpic.png” alt=”” border=”0″ />
<!–[if lt IE 7]>
<script type=’text/javascript’>
var bgElements; enablePngImages(); if(bgElements){    enableBgPngImages(bgElements); }
</script>
<![endif]–>

.pngImg {behavior: url(iepngfix.htc);}
以下片段添加至html文件一.IE6使用gif，其他则使用png来解决PNG背景灰

 

根据转载说个注意事项，DD_belatedPNG.js这个插件和iepng.js新版本的用法是一样的，虽然js代码不一样，但是最后为png生成的代码没看到有什么区别(就连产生的问题都是一样的)，所以用哪个都可以。就是关于DD_belatedPNG.js插件，ie6的选择器是必加的，否则该插件可能会对ie8正常的png图片带来不正常的影响。另外在包含大量png的页面中，根据布局的差异，这个插件仍然会产生一些问题，透明是可以透明，但是会改变图片的位置，具体原因没有深研究，目测是因为插件对图片处理后给图片一个绝对定位(position)，所以在一些特殊布局下页面就会走形，因此如果一定要用到png图片，一定要多测试。